CSS - 行高问题

Question

注意<h1>Jedálny lístok</h1>和<h2>A</h2>

之间的差距

• 究竟是什么产生了行高属性？
• 为什么line-height: 1.5;不等于line-height: 1.5em;
• 两种情况下的间隙都相同，或者线条高度被破坏，因为没有线高相同......

使用

body {
  line-height: 1.5;
}

没有

Answer 1

/* Keyword values */
line-height: normal;

/* Unitless: use this number multiplied by the element's font size */ 
line-height: 3.5;

/* <length> values */
line-height: 3em;

/* <percentage> values */
line-height: 34%;

/* Global values */
line-height: inherit;
line-height: initial;
line-height: unset;

https://developer.mozilla.org/en-US/docs/Web/CSS/line-height#Syntax

Answer 2

对于继承值，line-height：1.5不等于line-height：1.5em;例如，如果内部元素的字体大小是其父元素的两倍，那么继承的值1.2意味着使用其自身字体大小的1.2倍。