Monday, 9 March 2020

Negative Margins

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.

Direct Link to ArticlePermalink

The post Negative Margins appeared first on CSS-Tricks.



from CSS-Tricks https://ift.tt/3adLLjN
via IFTTT

No comments:

Post a Comment

Passkeys: What the Heck and Why?

These things called  passkeys  sure are making the rounds these days. They were a main attraction at  W3C TPAC 2022 , gained support in  Saf...