line-height: 2
和line-height: 200%
都表示行高是字体大小的2倍,但是它们是有区别的。
当它们写在父容器中时,子元素的字体大小不一样的时候,区别就体现出来了
line-height: 2
写在父容器中,那么子元素的行高都是自身高度的2倍,是相对大小。
子元素的字体大小不同,行高也会不同。line-height: 200%
写在父容器中,那么浏览器会立刻计算出行高的具体值,假如父容器的默认字体大小是16px
,那么计算得到的行高就是2×16px=32px
,子元素的行高都会继承这个32px
,是固定大小。
子元素的字体大小不同,行高都是固定某个值。