Quick CSS Quiz #3

Abdelrahman Ismail on October 05, 2018

In this series, I try to focus on CSS weird parts, throw quiz and its answer, hoping to give a better understanding of how CSS works in depth. R... [Read Full]
 

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 = 32px inherited 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)

For more info:
line-height MDN
3 things (almost) no one knows css

 

This is very easy. A line-height with unitless value rappresent the ratio based on the element font-size computed value (or inherited) and allows children to compute their line-height based on their font-size.

Ps: same “quiz” here.
allthingssmitty.com/2017/01/30/nop...

 

It's very easy if you already know how line-height with unit-less value works 😉, but unfortunately most developers go with 2em.

And the original quiz posted by Kevin Yank here: 3 things (almost) no one knows css

 

Yes but unitless line height is just one of the accepted value. It’s not a “trick” like the previous quiz.

 

No matter if always I miss the answer... I love this CSS quiz.

I choose 2em ... jajajaja. Now I know a little more about CSS.

CSS Quiz 3 - Equiman 0

 

Thank you 🤗🤗, this is the purpose of this series, to give you a deep understanding of how CSS really works.

 

This series of post deserve to be in #challenge tag

 
 

That's why this may seem tricky, CSS has a completely different behavior when using line-height with em rather than using unit-less value,

code of conduct - report abuse