css - 行高影响第一行上方和最后一行之后的间距

Question

我在侧标题中有一个带有多行的文本。想要增加两条线的间距，所以我设置了一个 line-height。当我这样做时，它不仅增加了两条线之间的间距，还增加了第一条线上方的间距（可能低于第二条线）。我怎样才能只增加两条线之间的间距，而不增加上下。

我知道这是一种行为Line-height。但只是好奇是否有任何好的解决方案。

这只是我要问的一个例子。

Jsfiddle：http: //jsfiddle.net/jitendravyas/V3eWV/

Answer 1

您可以为此使用负边距，但需要牢记以下几点：

line-height是一件有趣的事情。根据CSS2.1，它没有指定 line-height 而是指定 line-blocks 的最小高度：

在内容由行内元素组成的块容器元素上，'line-height' 指定元素内行框的最小高度。最小高度由基线上方的最小高度和基线下方的最小深度组成，就像每个行框都以具有元素字体和行高属性的零宽度行内框开始一样。我们称那个假想的盒子为“支柱”。（这个名字的灵感来自 TeX。）。

行框在9.4.2 行内格式化上下文中定义：

在行内格式化上下文中，框从包含块的顶部开始水平排列，一个接一个。这些框之间会考虑水平边距、边框和填充。这些框可以以不同的方式垂直对齐：它们的底部或顶部可以对齐，或者它们中文本的基线可以对齐。包含形成一条线的框的矩形区域称为线框。

这在CSS3中并没有太大变化，至少如果你不改变line-stacking. 但是，没有直接针对您的问题的属性：您无法更改 的line-height，::first-line它将始终被应用。

也就是说，暂时使用负边距。更好的是，将您的元素包装在一个通用容器中。通过使用:first-child，:last-child您可以添加任意数量的元素。

例子

<div>
    <h1>I've a text in side heading with multiple lines. Want the spacing the two lines to increase, so I set a line-height. When I do this, not only does it increase space between the two lines, it also increases spacing above the first line.</h1>    
    <h1>I've a text in side heading with multiple lines. Want the spacing the two lines to increase, so I set a line-height. When I do this, not only does it increase space between the two lines, it also increases spacing above the first line.</h1>
</div>

body {padding:30px;background:yellow;border:1px solid red;margin:0}
div{background:red;margin:0;padding:0;border:1px solid green;}
h1{line-height:2em;}
div > h1:first-child{
    margin-top:-.25em;
}
div > h1:last-child{
    margin-bottom:-.25em;
}