👋 Oi, mga repapips, Brian Dys here! I love music, photography, and creative stuff like UX design and art. This is a place where I collect my thoughts and works. Apart all these, I’m Jaycelle’s better half and Bryce’s dad. 🥰
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
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.