CSS（line-height继承时的坑） css

line-height继承的三种情况

body { line-height: 20px; font-size: 30px; } p { font-size: 16px; }

这时候p标签的line-height=20px，继承body的line-height=20px

【CSS（line-height继承时的坑）】line-hieght=1.5

body { line-height: 1.5; font-size: 30px; } p { font-size: 16px; }

这时候p标签的line-height=1.5，继承body的line-height=1.5。则p标签的line-height=16px * 1.5 = 24px
line-hieght=200%

body { line-height: 200%; font-size: 30px; } p { font-size: 16px; }

这时候p标签的line-height=60px，先计算body的line-height=200% = 200% * 30px = 60px。再p标签继承body的line-height=60px