PPK digs into the subject, which he found woefully undercovered in web tech documentation. Our entry doesn’t mention them at all, which I’ll aim to fix.
Agree on this situation:
This is by far the most common use case for negative margins. You give a container a padding so that its contents have some breathing space. However, you want the header to span the entire container, ignoring the padding. Negative margins are the way to go.
Like this:
Anecdotally, I find negative margins fairly intuitive. Although that’s surprising since there are so many oddities, like how they sometimes affect the element applied to itself (e.g. move itself to the left) and sometimes affect other elements (e.g. move other elements upward) — plus the fact that it affects margin collapsing which is weird anyway.
It would probably be smart to do this directional margin stuff with logical properties too.
If you switch from REM to EM in your example pen, the header is no longer contained within its parent. Any idea as to why this might happen?
Cheers!
I think
emis based on thefont-sizein the context. So the fact that theh2has a bigger font size than the module makes theemvalue bigger. Kinda funny situation. Hate to say it but that’s the kind thing that makes me aremguy.Wouldn’t it be better to divide this module into an header and a content part? Therefore, header part does not need padding anymore.
Do you adjust the browser default of 16px
to make rem to px conversion easier? I just saw some training that suggested adding
html{font-size:62.5%;} so that you get 1rem = 10px. It seemed brilliant to me but a more advanced user I mentioned this to didn’t seem to see the value in it. What’s your take on this?