To solve this quiz correctly, we should understand the line-height behavior with different values.
<length>:
The browser compute the line-height value for the current element, then nested child elements will inherit this fixed value form it.
For the first two options (which produce same results, gotcha!) body line-height = 16 * 2 = 32px p line-height = 32pxinherited from body element
<number> (unitless):
Tells the browser to every nested element line-height value is this number multiplied by the element's own font size. In most cases, this is the preferred way to set line-height and avoid unexpected results due to inheritance.
For 2 option body line-height = 16 * 2 = 32px p line-height = 12 * 2 = 24px (which is the correct answer)
To solve this quiz correctly, we should understand the
line-heightbehavior with different values.<length>:The browser compute the
line-heightvalue for the current element, then nested child elements will inherit this fixed value form it.For the first two options (which produce same results, gotcha!)
body line-height = 16 * 2 = 32px
p line-height = 32px inherited from body element
<number>(unitless):Tells the browser to every nested element
line-heightvalue is this number multiplied by the element's own font size. In most cases, this is the preferred way to set line-height and avoid unexpected results due to inheritance.For 2 option
body line-height = 16 * 2 = 32px
p line-height = 12 * 2 = 24px (which is the correct answer)
For more info:
line-height MDN
3 things (almost) no one knows css