Hi, I am trying to refresh my memory of CSS and HTML. On step 76 of the camper cafe menu, it says to create more space by adding a margin-top of 25px, I’ve done lots of math and looked throughout the code but I still can’t find how they drew this conclusion. If anyone could help me understand how they knew the correct margin value to use please help.
Thanks,
-Tad
They are using the default margins set on the h2 element by browsers. You can look at it in the browser dev tools. In FF on linux it is showing as 24.9px. I’m assuming that is the same for other browsers and is why they use 25px for the margin top on the hr. I’m not sure this is the best approach because if I manually increase the font size then the top margin on the h2 gets bigger but the top margin on the hr stays at 25px. The margin top on the hr should probably be in relative units so that it also grows as the font size gets bigger.
Usually you would use a CSS reset to get rid of all of these defaults added by the browser and then you would be forced to set a margin top on the h2.
When I searched it up the default h2 margin top value was 0.83em, using the default value of 1 em, that comes out to 13.28. When I add that to the default top margin value of an hr(0.5em) it is 21.28, but that was too small when I tried it. Did I make a calculation mistake?
Be careful about assuming the default value of 1em. Yes, most browsers ship with the default font size set to 16px but users can change that setting to whatever they want.
The easiest way to set the top margin on the hr to relative units is to use the browser’s dev tools to figure out what it should be. You know you want it to be 25px (well, technically 24.9px) at the default font size, so you can guess what an equivalent rem unit would be and then adjust it accordingly until you get it exactly right.
Spoiler: It turns out to be 1.55625rem (if you are going for the technically correct 24.9px).
When I used dev tools, I see that it is 24.9px as well, but in any other scenario it is different… Do you know why this would be?
I think I found it out. By changing the font size of the h2 to be 30px, it means that 0.83 x 30 is about ~24.9. Thank you for your help. I also realized that 1em is relative to the element and not the default paragraph font size, so by changing the font size of the h2 it affected the margin, but that still left the margin of the paragraphs untouched because that em is relative to the 16px of the paragraph.
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.