"Fundamental CSS comprehension" assessment

(Mauro Di Bert) #21

@chrismills could you help me with this? I’m sorry if this is not the proper way but it’s what i found being really newby! Tks!:

(A.J.) #22

I have a question concerning line-height and how it works.
When I’ve reached the question about sizing the line-height I’ve tried to experiment to understand how it works. But without success.
If we follow exercise we have a h2 element inside a header element who has set height property to 3em(30px) and padding to 1em(10px). So I’ve tried to experiment and see how my h2 element will align in the content area of header element. h2 set to have margin = padding = 0 and I’ve set the font-size of the text inside h2 element to be 3em(30px) to occupy whole content area. I thought this should align the text in the content area. But without success.
The problem if I do not understand how line-height or text inside and element (who’s in his turn inside an element header) work further work with HTML and CSS will get more confusing.
Can some one explain how line-height behave? I have impression that there is some hidden line-height by default. But even when I unset line-height the 30px text wont align in the header element.

(adilson) #24

@RickSanch3z Your <h2> element must have 20px (2em) as font size, that’s what the assessment asks so you need to stick with that. Now, what they are asking is to align the heading in the header in a vertical way using only line-height, which takes either unitless values or px, em, percentages, etc. For our purposes, we have a height of 3em in our header (container) and 2em in our heading (content), so if we want to fill the content in the container we need to increase the content’s height by 1.5 times (3em/2em) and that’s the value you need for line-height.