What happens when you set negative margins?

Difficulty: 5/10

box model, layout, overflow

Understanding Negative Margins in CSS

In CSS, setting a negative margin moves an element closer to its neighboring elements or even causes it to overlap them. Unlike padding, which only adds space inside an element, negative margins can reduce or reverse the space outside an element, affecting layout positioning.

Example of Negative Margin

Effects of Negative Margins

1
Can pull an element closer to or over neighboring elements.
2
May cause overlapping content if values are too large.
3
Can collapse with adjacent vertical margins, following CSS margin collapse rules.
4
Does not affect the element's content or padding, only its position.

Scenario Questions

0-2 years experience

2-5 years experience

Follow-up Questions