行高影响第一行之上和最后一行之后的间距 [英] Line-height affecting spacing above first line and after last line
问题描述
我在侧面标题中有多行文字。想要两条线的间距增加，所以我设置一个line-height。当我这样做，不仅增加了两条线之间的空间，它也增加了第一线以上的间距（也许在第二线以下）。
我知道这是一个行为 Line-height 。但是只是好奇，如果有任何良好的解决方案为这。
这只是一个例子，我问。
Jsfiddle：，它没有指定行高，而是指定最小高度的行块：
在内容由内联级元素组成的块容器元素上，'line-height' em>最小高度。最小高度包括基线上方的最小高度和下方的最小深度，正如每个线框以元素的字体和线高度属性的零宽度内联框开始一样。我们把这个想象的盒子称为支柱。 （名称受TeX的启发。）
在内联格式化上下文中，框是从包含块的顶部开始，一个接一个地水平布局的。在这些框之间遵守水平边距，边框和填充。盒子可以以不同的方式垂直对齐：它们的底部或顶部可以对齐，或者它们内的文本的基线可以对齐。包含形成线条的框的矩形区域称为 线框。
这在 CSS3中不会改变，至少如果您不更改 line-stacking 。但是，没有直接针对您的问题的属性：您不能更改 ::第一行 line-height c $ c>，它总是会被应用。
也就是说，暂时使用负边距。更好的是，将你的元素包装在一个通用的容器中。通过使用：first-child 和：last-child ，您可以添加任意数量的元素。
示例
< div>
< h1>我在侧面标题中有多行文本。想要两条线的间距增加，所以我设置一个line-height。当我这样做，不仅增加了两条线之间的空间，它也增加了第一条线之上的间距。< / h1>
< h1>我在侧面标题中有多行文本。想要两条线的间距增加，所以我设置一个line-height。当我这样做，不仅增加了两条线之间的空间，它也增加了第一条线之上的间距。< / 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;
}
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 (and maybe below the second). How can I increase spacing between the two lines only, without increasing above and below.
I know it's a behavior of Line-height. but just curious if there is any good solution for this.
This is just en example to what I'm asking.
Jsfiddle: http://jsfiddle.net/jitendravyas/V3eWV/
You can use negative margins for this, although there is something to keep in mind:
line-height is a funny thing. According to CSS2.1 it doesn't specify the line-height but the minimum height of line-blocks:
On a block container element whose content is composed of inline-level elements, 'line-height' specifies the minimal height of line boxes within the element. The minimum height consists of a minimum height above the baseline and a minimum depth below it, exactly as if each line box starts with a zero-width inline box with the element's font and line height properties. We call that imaginary box a "strut." (The name is inspired by TeX.).
A line box is defined in 9.4.2 Inline formatting contexts:
In an inline formatting context, boxes are laid out horizontally, one after the other, beginning at the top of a containing block. Horizontal margins, borders, and padding are respected between these boxes. The boxes may be aligned vertically in different ways: their bottoms or tops may be aligned, or the baselines of text within them may be aligned. The rectangular area that contains the boxes that form a line is called a line box.
This doesn't change in CSS3 very much, at least if you don't change the line-stacking. However, there is no property which targets your problem directly: you can't change the line-height of the ::first-line, it will always get applied.
That said, use negative margins for the time being. Even better, wrap your elements in a generic container. By using :first-child and :last-child you can add as many elements as you like.
Example
<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;
}
这篇关于行高影响第一行之上和最后一行之后的间距的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
