深入理解CSS行高line-height

html-css014

深入理解CSS行高line-height,第1张

基线并不是汉字的下端沿，而是英文字母"x"的下端沿

对于行内元素如em、strong、span和等，其padding、margin、border-top、border-bottom 不会增加行高。padding会覆盖；margin将重置为0；border-top和border-bottom同样会覆盖。padding-left、padding-right、border-left和border-right可用。

img元素会影响行高

证明撑开div高度的是line-height而不是font-size

内联盒子/匿名内联盒子inline-boxes

行框盒子line-boxes  每一行就是一个“行框盒子”，每“行框盒子”由一个个“内联盒子组成”

包含盒子containing-box，由一行行的“行框盒子”组成

内容区域content-area，一种围绕文字看不见的盒子，大小与font-size大小有关

1.行高的垂直居中性

、、在单行或多行或图片垂直居中实现上的应用

单行文字的垂直居中对齐： line-height值设置为height一样大小的值可以实现单行文字的垂直居中；height值可以省略

多行文字的垂直居中对齐 ： 要实现高度不固定的文字垂直居中使用padding就好了。对于高度固定的div，里面文字单行或多行显示，字体大小有大有小的情况怎么办呢？方法之一就是借助于line-height。

、 、图片的垂直居中

类似上面处理的方法，借助 i标签或伪元素

、 、使用缩放因子

1、在CSS中，line-height被用来控制行与行之间垂直距离。

2、行间距与半行间距，还是取决于CSS中的line-height。默认状态，浏览器使用1.0-1.2 line-height, 这是一个初始值。你可以定义line-height属性来覆盖初始值：p｛line-height:140%｝

你可以有5种方式来定义line-height。

3、line-height可以被定义为：body{line-height:normal}

4、line-height可以被定义为：body{line-height:inherit}

5、line-height可以使用一个百分比的值body{line-height:120%}

6、line-height可以被定义为一个长度值(px,em等) body{line-height:25px}

7、line-height也可以被定义为纯数字， body{line-height:1.2}