A Dose of Negativity

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.

[codepen_embed height=”798″ theme_id=”1820″ slug_hash=”FybHu” default_tab=”result”]See the Pen A Dose of Negativity by Brian Dys Sahagun (@BrianSahagun) on CodePen.[/codepen_embed]

As tested on the img element, 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.