您的位置：首页 > 其它

line-height的继承

2009-09-02 23:59 197 查看

看了玉伯的博客里关于line-height的一篇文章，http://lifesinger.org/blog/2009/08/line-height/ 。平时经常见到的line-height竟包含很多鲜为人知的事。line-height的值可以为：<length>|<percentage>|<number>| noromal | inherit。em，px和百分数都相对于元素的font-size值计算。
但是当一个块级元素继承另一个元素的line-height属性时，情况就会变得比较复杂。line-height值从父元素继承时，要从父元素那里计算，而不是在子元素上计算。
<body style="font-size:10px;">
2 <div style="line-height:150%">
3 <p style="font-size:15px;">这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字</p>
4 </div>
5</body>
这里的p的font-size是16px，但是它继承来的line-height只有15px，所以导致行挨得比较近。
解决办法：1.可以为每个元素显式的设置line-height属性，但是不太实用。
2.指定一个数，由它设置缩放因子。
<body style="font-size:10px;">
2 <div style="line-height:1.5">
3 <p style="font-size:15px;">这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字
4 </p>
5 </div>
6</body>
指定一个数时，缩放因子将是继承值而不是计算值。这个数会应用到该元素及其所有子元素，所以各元素可以根据自己的font-size值来计算line-height。
所以这里的p的line-height为15*1.5px；

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航