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.
The problem:
Having the following code snippet, for a paragraph element with font-size equals 12px, you want the paragraph's line-height to be equals to the double of its font-size(24px). Which of the following line-height values will achieve this if you apply it to the body element?
(note that the default font-size for browser is 16px)
<p style="font-size: 12px">Having fun solving CSS Quiz</p>
<style>
body {
line-height: <value>;
}
</style>
Options:
- 200%
- 2em
- 2
- double
The answer:
you can find the answer below, but please give yourself a couple of minutes to think about it, to make sure you benefit from this quiz.
The correct answer is: "2" 🎉🎉
If you wonder why this is the correct answer, please read the discussions below, I will post the explanation soon.
Cover image original artwork by: Sergi Delgado
Latest comments (9)
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
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
How is this different from 2em?
That's why this may seem tricky, CSS has a completely different behavior when using
line-heightwith em rather than using unit-less value,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-heightwith unit-less value works 😉, but unfortunately most developers go with2em.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.