CSS 之 line-height如何继承
line-height继承,一共有以下3种情况:
html代码
<body> <p>这是一行文字</p> </body>
1. 写具体数值,则直接继承该值。
body { font-size: 20px; line-height: 50px; /* 数值 */ } p { font-size: 10px; }
<p> 元素 line-height 直接继承50px
2. 写比例,如2 或者1.5 等,则继承该比例。
body { font-size: 20px; line-height: 2; /* 比例 */ } p { font-size: 10px; }
<p>元素 line-height 直接继承比例,
<p>元素line-height = 2(比例)* 10px(font-size)= 20px
3. 写百分比,如200%,则先计算再继承算出来的值。(差分点)
body { font-size: 20px; line-height: 200%; /* 百分比 */ } p { font-size: 10px; }
<p>元素 line-height 继承计算后的值,
<p>元素line-height = 200%(百分比)* 20px(父元素的font-size)= 40px