css行高line-height

line-height（行高）属性既可以接受无单位的数值，也可以使用带单位的行高值

1，当定义一个有单位的值，就会将就算后的行高值传给的后代元素

HTML

<ul>
    <li>我是你大爷<small>的七舅老爷</small></li>
</ul>

CSS

ul{
    font-size: 15px;
    line-height: 1em;
}
li{
    font-size: 10px;
}
small{
    font-size: 80%;
}

15px的行高值。不会再根据字号值改变行高值。

css行高line-height

当设置line-height: 15px 效果是一样的

ul{
            font-size: 15px;
            line-height: 15px;
        }
        li{
            font-size: 15px
        }
        small{
            font-size: 80%;
        }

如果去掉单位，所有继承了这个1的元素会把这个值同他们自身的字号计算值相乘，声明了font-size:10px的列表项元素会有一个10px的计算后的行高值，并且small元素也会把这个值与自身的计算字号值相乘，因此这个8px的字号计算后得到的行高值也是8px

css行高line-height

ul{
            font-size: 15px;
            line-height: 1;
        }
        li{
            font-size:15px;
        }
        small{
            font-size: 80%;
        }

css行高line-height

css行高line-height

相关推荐