line-height
行距、行间距
行距: 相邻文本行间 上一个文本行基线 和 下一个文本行基线 之间的距离。
行间距: 相邻文本行间 上一个文本行下行线 和 下一个文本行上行线 之间的距离。
行距 = 行间距 + 字体大小
在CSS中,CSS属性line-height则是用于设置真实的行距。从W3C Rec中看出,line-height就是行距,而line-height的字面意思即为“行高”,推导结果CSS中 行高即是行距。
了解了行高,行距,行间距。那么接下来介绍line-height的重要属性–垂直居中。
我们知道,行距(leading) = 行间距(line-space) + 字体大小(font-size)。行间距与字体大小都可以通过相应CSS属性设置,问题是行间距所占的空间是怎么分配的呢?
CSS采用的是将行间距对半开,然后分配到上下两端,这里引用了Half-leading
的概念, Half-leading = 行距/2
由于行距可能为负值,可以知道行间距可能为负数,那么垂直居中还有效么?
答案是肯定的,行间距为负数时,Half-leading 自然也是负数,只是上下两端从增加等量空间变为减少等量空间而已。如下例子:
<div style="position:relative;top:100px;font-size:90px;line-height:10px;background:yellow;">
<span style="border:solid 1px red;line-height:10px;">x</span>
</div>
line-height属性
CSS line-height 属性 | 菜鸟教程
CSS line-height 属性 | W3school
值 | 描述 |
---|---|
可能值 | normal | <number> | <lenght> | <percentage> | <inherit> |
默认值 | normal |
继承性 | yes |
normal
对于normal,其实就是一个值,但是由浏览器决定,实际值一般在1.0~1.2之间(闭区间)
不同浏览器下,normal
不同;
同一浏览器下,font-size
不同,normal
也不同;
同一浏览器下,font-size
相同,font-family
不同,normal
也会变化。
normal 的平均值确实是 1.0~1.2(闭区间),但是具体到特定浏览器、font-family 和 font-size时,normal值可能会大于1.2。
length
指定长度用于计算线盒高度,负值非法。
设置固定值,单位可以是 px 、pt 。
好处就是简单,设置是什么,line-height
的实际高度就是什么。
坏处是子元素默认 继承 父容器的line-height,若子元素的font-size 大于 父容器的font-size,那么子元素的文本行会什么密集。
解决方案,一般是采用 相对 font-size 实际大小 来设置 line-height 值的方式,如默认 normal
方法。
percentage(%)
计算值是百分比乘以元素计算字体大小,负值非法。
值的注意的是,参考系的确是font-size,但子元素继承的是父容器的实际 line-height 值,也就是说父容器设置为 font-size:20px;line-height:200%;
,子元素继承的line-height值为 40px,而不是 200% ,因此又回到了 方式 的问题了。
number
属性的使用值是 这个数字 乘以 元素的字体大小,负值非法,计算值与指定值相同。
和方式一样,以 font-size 为参考系,以相对值方式设置 line-height。
唯一不同的是,子元素继承的是父容器的值,参考系自动变为子元素的 font-size
line-height: 1.2em;
line-height: 1.2;
上门的两句其实是等价的,若想将参考系 改 为根元素的 font-size , 需要CSS3的新增line-height:1.2rem;
。
深入理解 line-height 和 vertical-align
根据WCAG2.0(万维网内容可存取性指南)规定“段落中的行距至少要1.5倍”,那么是否在body设置一下,就一劳永逸了呢?
body{
font-size: 16px;
line-height: 1.5;
}
h1 {
font-size:32px;
}
p {
font-size:16px;
}
#footer {
font-size:12px;
}
<h1>深入理解 line-height 和 vertical-align</h1>
<p>In my dual profession as an educator and health care provider, I have worked with numerous children infected with the virus that causes AIDS. The relationships that I have had with these special kids have been gifts in my life. They have taught me so many things, but I have especially learned that great courage can be found in the smallest of packages. Let me tell you about Tyler.
</p>
<div id="footer">
bed and whispered, “I might die soon. I’m not scared. When I die, please dress me in red. Mom promised she’s coming to heaven, too. I’ll be playing when she gets there, and I want to make sure she can find me.”
</div>
代码效果呈现如图,不难发现,对于h1
标题来说,行距有点多,于是可以有如下配置:
body{
line-height:1.5;
}
h1,h2,h3,h4,h5,h6{
line-height:1.2;
}
行距确实减少了!
vertical-align如何对齐?
属性
CSS vertical-align 属性 | W3school
CSS vertical-align 属性 | MDN web docs
它的属性规则还是比较多的,但是也不能都记,或者用的时候挨个查。归纳一下不难发现
- 对齐操作必定涉及操作元素和参考系元素,而
vertical-align
的值全是指的是参考系元素的位置,操作元素则以baseline
或者linebox
上中下作对齐; - 默认对齐方式为
baseline
,数量值均是相对于baseline
而言。
注意:vertical-align 仅对 inline-level 和 table-cell 元素有效。
baseline
<div style="font-size:14px;">
<span style="font-size:40px;">line-height x vertical-align</span>
x for reference frame
</div>
这里的x for reference frame作为参考系,它的baseline
就是 line-height x vertical-align 要对齐的。
在此baseline
的基础上设置 length
和 percentage
- 在
span
中设置vertical-align: 10px;
<div style="font-size:14px;">
<span style="font-size:40px;vertical-align:10px;">line-height x vertical-align</span>
x for reference frame
</div>
- 在
span
中设置vertical-align: -10px;
<div style="font-size:14px;">
<span style="font-size:40px;vertical-align:-10px;">line-height x vertical-align</span>
x for reference frame
</div>
- 在
div
中设置line-height:1;
, 同时在span
中设置vertical-align:50%;
<div style="font-size:14px;line-height:1;">
<span style="font-size:40px;vertical-align:50%;">line-height x vertical-align</span>
x for reference frame
</div>
- 在
div
中设置line-height:1;
, 同时在span
中设置vertical-align: -50%;
<div style="font-size:14px;line-height:1;">
<span style="font-size:40px;vertical-align: -50%;">line-height x vertical-align</span>
x for reference frame
</div>
更多推荐
CSS基线
发布评论