此處僅列舉幾種個人認為易模糊不清的情形。
html結構如下:
<p> </p><p> 测试行高 </p>
.parent{ font-size: 12px; ine-height: 1; } .child{ font-size: 16px; }
父元素parent為
子元素child為
表示子元素繼承了父元素顯示設定的數字值,與父元素自身font -size有關
.parent{ font-size: 12px; line-height: 100%; } .child{ font-size: 16px; }
父元素parent為
子元素child為
表明子元素繼承了父元素根據百分比計算後的行高,與父元素自身font-size無關
對於1、2情形,給子元素child增加line-height: inherit
,衍生情形3、4,表現不變
僅列舉此清的情形。
html結構如下:
<p> </p><p> 测试行高 </p>
.parent{ font-size: 12px; ine-height: 1; } .child{ font-size: 16px; }
父元素parent為
子元素child為
表示子元素繼承了父元素顯示設定的數字值,與父元素自身font -size有關
.parent{ font-size: 12px; line-height: 100%; } .child{ font-size: 16px; }
父元素parent為
子元素child為
表明子元素繼承了父元素根據百分比計算後的行高,與父元素自身font-size無關
更多CSS篇-line-height計算方法(父子元素)相關文章請關注PHP中文網!