next smelt
So apparently Im having trouble understanding these margins. Why does it have a margin bottom evne though it was the font-size that was 90. how does this equate to margin?
when we say margin - is it the distance to the closest object? or the container that it is present to?
Top , Bottom- how are these different from margin? Any help is appreciated. Thanks in Advance ! 🙂
🧐 Margins are very confusing ! #CSS
so apparently when we do font size - its the containers size thats added to both top and bottom? I see that in case of HOME -- margins top n bottom of size equal to its font size were auto added. 🤔
jovial portal
Are you perhaps struggling with the concept of relative units? Specifically em in this case?
I'm not 100% sure what your question is here but to explain a little -
Your "home" is an <h3> which has a default margin of typically 1em top and bottom making the margins equal to the font size - the font size doesn't get "added" precisely but since the font size is 90px and the margin is 1em it follows that they're 90px. As your font size changes do too will your margins.
In the case of the home score you have a bottom margin because it is specified in your p block...
You've set a margin-block-end: 1em; Once again, since the font size is 90px then the bottom margin (the block end) will therefore be 90px.
There is no top margin in this case because you have set it to 0px as part of the .zero definition.
next smelt
@jovial portal thanks for the reply, I didnt know anything about 1em before this. Thanks for letting me know. I didnt know that until now. and I have not set these too. looks like they got set by default
not sure what "margin-block-end: 1em" does tho
jovial portal
margin-block-start means the start of a block... in reality to usually means margin-top. Similarly margin-block-end means the end of the block (margin-bottom).