default-2

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.


This post was originally posted here

Check out our Starter Sites built with #ToolWeLove including Toolset, Elementor Pro, and Astra Pro.

 

Share this page
Share on facebook
Share on google
Share on twitter
Share on linkedin
Share on email
Pixallus Website Giveaway

We understand COVID has created shifts in many people’s lives. That’s why we’ve decided to giveaway a fully functional website with all the tools you

Read More »
How to Choose WordPress Hosting

Pixallus WordPress Hosting. Simplified. Enjoy blazing fast WordPress website loading speeds and 99.9% uptime. Whether you’re a freelancer, small business, or a large organization, we

Read More »
The Thirteenth Fourth

Well boy howdy. The 13th birthday of CSS-Tricks has rolled around. A proper teenager now, howabouthat? I always take the opportunity to do a bit

Read More »
sendinblue