影响第一行以上和最后一行之后的行间距的行高

Question

我在侧面标题中有多行文字.想要两条线的间距增加,所以我设置了一个线高.当我这样做时,它不仅增加了两条线之间的间距,而且还增加了第一条线之上的间距(并且可能低于第二条线).如何才能增加两条线之间的间距,而不会增加上下.

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

这只是我要问的例子.

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

Answer 1

您可以使用负边距,但需要记住:

line-height是一件有趣的事情.根据CSS2.1,它没有指定行高,而是指定行块的最小高度:

在内容由内联级元素组成的块容器元素上,"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;
}