Hi, I’m Brian Dys — a photographer from the inside looking out · a composer entangled in electronic music · a UX designer · a spouse, a parent, & everything in between.
If you have a padded content, everything in it will be bound by the padding around it.
But how do we expand an element to the edges of the container, disobeying the padding – something like a full-width picture.
We use negative left and right margins to offset the spacing brought about by the padding.
Negativity only for margins
The tendency of the negative margin is to, instead of inserting the specified space, it allows the content to fill in a space to that direction. So, for
margin-left: -1rem, it will allow the content
1rem at the left – couple that with a
margin-right: -1rem, it will allow the content
1rem at the right. That will offset the
1rem padding around the container.
As tested on the
margin-right does not work – so we wrap the image in a
div and apply the negative margins on that element.
You can use negative margins to offset/correct unwanted spacings around elements.