Assessment needed for CSS test (online name card)

Hi :wave:
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? :sob:

my work:

assessment page:

Nice work, @Risa

Regarding the line-height:
Your values are correct, but it’s recommend to use unitless values. For an explanation see: https://developer.mozilla.org/en-US/docs/Web/CSS/line-height#prefer_unitless_numbers_for_line-height_values

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)

You hope this was understandable. :slightly_smiling_face:

Have a nice weekend,
Michael

1 Like

Hi Michael, thank you again for your feedback!

Yes your explanation was really easy for me to understand :slight_smile:
The link was helpful too to understand why I should use unit-less value!

Thank you and have a nice weekend!
Risa

1 Like