line-height

如果使用数字设定行高(通常都这么做),那么所有的子元素都会继承这个比例。因此,如果父元素的字体大小是 20 像素(或以 em 等表示的等价大小),行高是 2,则该元素的行高就是 40(即 20 x 2)像素。如果子元素的字体大小是 30 像素,则该元素的行高就是 60(即 30 × 2)像素。

如果使用百分数或 em 值,那么只会继承产生的行高(即计算出来的值)。因此,如果父元素的字体大小是 20 像素,行高是 200%,则该元素的行高就是 40 像素。所有的子元素都将继承 40 像素的行高,不管字体大小是多少。

一、line-height 设置为数字

父元素 font-size: 20px; line-height: 2;

子元素1 font-size: inherit;

子元素2 font-size: 30px;

子元素3 font-size: 40px;

二、line-height 设置为百分比 / em

父元素 font-size: 20px; line-height: 200%;

子元素1 font-size: inherit;

子元素2 font-size: 30px;

子元素3 font-size: 40px;

父元素 font-size: 20px; line-height: 2em;

子元素1 font-size: inherit;

子元素2 font-size: 30px;

子元素3 font-size: 40px;