CSS CSS Layout Basics Getting Started with CSS Layout Why Vertical Margins Collapse

Juan David Hernandez
Juan David Hernandez
7,415 Points

Positive and negative margins

I wondering what happen if I use something like:

.div1 { margin-bottom: 100px; }

.div2{ margin-top: -50px; }

In that case the div1 is going to override the div2's margin-top?

1 Answer

Martin Ellis
Martin Ellis
6,724 Points

Hi Juan,

.div-2's -50px margin value would be subtracted from the 100px margin of .div-1 leaving you with 50px of margin spacing between the two divs. If .div-1 had 200px of bottom margin then the -50px would be taken from that, leaving you with 150px margin spacing between the two divs etc..

Hope this helped :)