Hi
I would really appreciate if someone could assess my work for CSS comprehension test.
I struggled to calculate the right line-height considering content box’s size. I just guessed random line-height values and visually adjusted it to make it look like in the centre…
Could you please tell me how I can calculate that properly?
To show how to calculate the line-height let’s look at the header:
Because you used box-sizing: border-box; we first have to subtract the padding from the height to get the height of the content: 5em - 1em - 1em = 3em (height minus top and bottom padding). Since the size of the h2 font is 2em and we want to reach the 3em from above for the resulting height, we need to choose 1.5 as the value (1.5 * 2em = 3em).
The same can be done for the footer: font-size (1.5em) * line-height (2) = resulting height (3em)