Question
This exercise says that the unitless measure of `line-height is preferred since it is responsive. However, aren’t em units also responsive? Wouldn’t they automatically re-adjust like the unitless ratio value?
Answer
While ems are responsive units which will automatically re-adjust as our font sizes change, it is important for us to consider what these units are measured relative to and how our properties cascade down to child elements.
The main reason that the unitless value is preferred is because child elements will inherit the value itself, rather than the computed line height value. For example, say we have a <span> nested within a <p> element. Consider the following snippets:
p {
font-size: 16px;
Line-height: 1.5;
}
span {
Font-size: 20px;
}
The computed line height value for our <p> text will be 16 * 1.5 = 24px. However, since we are using a unitless line-height value, the computed line height of our <span> text will be 20 * 1.5 = 30px. Now, if we had instead tacted em onto the end of the line-height property within our p selector, the <span> element would have inherited the computed line height of 24px.