文本垂直对齐
行高
line-height属性是制定文本行基线之间的距离,而不是字体的大小,它确定了将各个元素框的高度增加或减少多少。line-height控制了行间距,这是文本行之间超出字体大小的额外空间。换句话说,line-height值和字体大小之差就是行间距。
在应用到块级元素时,line-height定义了元素中文本基线之间的最小距离。注意它定义的是最小距离,而不是一个绝对数值,文本基线拉开的距离可能比line-height值更大。line-height并不影响替换元素布局,不过确实可以应用到替换元素。
构造文本行
行内框文本行中的每个元素都会生成一个内容区,这由字体的大小确定。这个内容则会生成一个行内框(inline box),如果不存在其他因素,这个行内框就完全等于该元素的内容区。由line-height产生的行间距就是增加或减少各行内框高度的因素之一。要确定一个给定元素的行间距,只需要将line-height的计算值减去font-size的计算值。这个值就是总的行间距。行间距可能为负。行间距再除以2,将间距的一半分别应用到内容区的顶部和底部。其结果就是该元素的行内框。 行框
一旦给定内容行已经生成了所有行内框,接下来在 行框 的构造中就会考虑这些行内框。 行框 的高度恰好足以包含 最高行内框的顶端 和 最低行内框的底端 。 指定line-height值
line-height如果取默认值normal,用户代理必须计算行间的垂直空间。不同的用户代理计算出的值可能不同,不过通常都是 字体大小的1.2倍 ,这使得行框要高于给定元素的font-size值。
行高和继承
当一个块级元素从另一个元素继承line-height时,问题会变得更为复杂。line-height值从父元素继承时,要从父元素计算而不是在子元素计算 。
body {font-size:10px;} div {line-height:1em;} p {font-size : 18px}
这段文字从div继承了line-height,div的字体大小时10,所以计算出来的大小是10px。
查看更多关于CSS行高和对齐_html/css_WEB-ITnose的详细内容...
声明:本文来自网络,不代表【好得很程序员自学网】立场,转载请注明出处:http://www.haodehen.cn/did113509