CSS:可以设置没有行高的行间距?

时间:2018-01-11 04:44:02

标签: css

我知道line-height属性和all the fun we can have with it,但是可以通过其他方式调整行间距吗?

例如,在Adobe InDesign中,行高和行间距是两个可以独立调整的独立属性。

我现在正在使用非常漂亮的Garamond进行设计,但是将线条高度设置为一个清晰易读的水平也会使链接和下划线看起来非常难看。 text-decoration的简单下划线看起来很好,但理想情况下,我希望能够使下划线更具视觉冲击力和互动性,就像在HuffPost的网站上一样。他们正在使用box-shadow。盒子阴影,底部边框,任何类似的东西都会捕捉到线条底部的高度。

我们可以同时使用CSS吗?

实施例

使用text-decoration: underline;

的正常下划线

Normal Underline

边境"强调"使用border-bottom: 1px solid $special-blue; 在我看来,似乎远远低于文本。即使是适度保守的行高1.4rem

enter image description here

1 个答案:

答案 0 :(得分:0)

我找到了这个解决方案,您可以在其中为该特定元素将行高设置为1。这会重置该元素的行高,但不会影响该行中的任何其他内容。

通过这样做,

p.new a{
  text-decoration: none;
  display:inline-block;
  border-bottom:1px solid green;
  line-height:1;
}

JS Fiddle

我相信行高和间距没有两个不同的属性。