line-height
2016-05-23 23:32:01 0 举报AI智能生成
line-height 是一个用于设置文本行间距的属性，它决定了相邻两行文字之间的垂直距离。通过调整 line-height 的值，可以改变文本的可读性和视觉效果。通常情况下，较大的 line-height 值可以使文本看起来更加宽松，有利于阅读；而较小的 line-height 值则可以使文本看起来更加紧凑。此外，line-height 属性还可以影响文本中的字母间距和单词间距。在网页设计和排版中，合理地设置 line-height 值是非常重要的，它可以提高用户体验，使文本内容更加易于阅读和理解。
作者其他创作
大纲/内容
取值
body{line-height:120%;font-size:16px;}
h1{font-size:32px;}
p{font-size:16px;}
计算后：body：line-height：16px*120%=192px
这个计算的值会被层叠下去的元素所继承
所以会出现，太紧、太正好、太松
body{line-height:inherit;}
规定应该从父元素继承 line-height 属性的值。
body{line-height:normal}
normal约为1.2 所有继承下来的元素不会忽略本
身的font-size，而使用基于font-size算出来的
line-height现在，line-height会随着相关的
font-size做相应的比例缩放
被定义为一个长度值(px,em等) body{line-height:25px;}
后代元素会直接继承
所有继承下来的元素会忽略本身的字
体大小，而使用相同的line-height
被定义为纯数字， body{line-height:1.2}
同normal,但更灵活，可以自己设置值
建议：使用出数字
（很好的一篇文章）http://www.cnblogs.com/fengzheng126/archive/2012/05/18/2507632.html
应用
1.设置行高
div文字垂直居中
div居中对齐一直是个难题，水平还好解决些，margin：0 auto;
可以解决现代浏览器，IE下text-align:center。但垂直居中就
没那么简单了
解决方案
利用line-block这样做
This is a test.
This is a test.
This is a test.
单行就比较简单了，把line-height设置为box的大小可以实现单行文字的垂直居中
This is a test.
0 条评论
下一页
