line-height
行高（line-height）可以被继承，如果一个元素没有设置行高，则它会从父元素继承行高。但是，如果子元素设置了自己的行高，则它将使用自己的行高而不是从父元素继承。
父元素不同的行高值,则继承页不同:
- line-height的值是具体数值,如10px,则继承该值
- line-height的值是倍数,如1,则继承计算后的值;
- line-height的值的百分比,如150%,则继承父级计算后的值 ==>倍数和百分比其实本质上是一样的
父级line-height是具体数值
body {
font-size: 30px;
line-height:50px;
}
div{
height: 16px;
}
</style>
</head>
<body>
<div>我是儿子</div>
</body>
父级的行高是具体值30px,自己直接继承如下图1所示:
父级line-height是倍数
body {
font-size: 30px;
line-height:1;
}
div{
height: 16px;
}
</style>
</head>
<body>
<div>我是儿子</div>
</body>
父级的行高是倍数时,继承计算后的结果.
父级line-height是百分比
body {
font-size: 30px;
line-height:200%;
}
div{
height: 16px;
}
</style>
</head>
<body>
<div>我是儿子</div>
</body>
父级的行高经计算为30px 乘以200%等于60px,所以自己继承了父级的行行高60px
如图3:
子级自己有行高
body {
font-size: 30px;
line-height:200%;
}
div{
height: 16px;
line-height: 20px;
}
</style>
</head>
<body>
<div>我是儿子</div>
</body>
所以,当子级有自己的行高时,不会继承父级的行高
