Our Blog

We love to share our experience and knowledge with community.

Understand CSS Margins Collapsing

Understanding how CSS margins collapse can make a web developer life easy. lets take a look how margin collapsing works in CSS.

To better understand this article reader should have basic understanding about CSS Box Model.

Horizontal and Vertical Margins Collapsing

Horizontal margins between all types of boxes never collapse. vertical margins collapse between certain boxes.

To understand how vertical margins collapse lets start with a basic html and CSS example.

XHTML Code

<div id="parent">
	<div id="red">
		<p>Red</p>
	</div>
	<div id="blue">
		<p>Blue</p>
	</div>
</div>

CSS Code

#parent{ background-color:yellow; width:300px; }
#red {background-color:red; height:50px; }
#blue {background-color:blue; height:50px; }

Browser Result

Adjacent Elements With Positive Margin

Vertical adjoining margins collapses. If two elements has positive vertically adjoining margin than only the maximum of both will take effect.

CSS Code

#parent{ background-color:yellow; width:300px; }
#red {background-color:red; height:50px; margin-bottom:30px;}
#blue {background-color:blue; height:50px; margin-top:20px;}

Browser Result

Adjacent Elements With Positive and Negative Margin

If two elements has positive and negative vertically adjoining margins than resulting margin would be the sum of both.

CSS Code

#parent{ background-color:yellow; width:300px; }
#red {background-color:red; height:50px; margin-bottom:30px;}
#blue {background-color:blue; height:50px; margin-top:-20px;}

Browser Result

If the sum of both margins is a negative value than later element will overlap over the first element.

CSS Code

#parent{ background-color:yellow; width:300px; }
#red {background-color:red; height:50px; margin-bottom:30px;}
#blue {background-color:blue; height:50px; margin-top:-40px;}

Browser Result

Parent and Child Margin Collapsing

if parent element has no border or padding than parent and child margins collapse and maximum of both become resulting margin.

CSS Code

#parent{ background-color:yellow; width:300px; }
#red {background-color:red; height:50px; }
#blue {background-color:blue; height:50px; margin-top:30px;}
#blue p{ margin-top:20px; background:green;}

Browser Result

How to Stop Parent Child Margin Collapsing

to stop parent and child margin collapsing parent should have a border or padding.

CSS Code

#parent{ background-color:yellow; width:300px;}
#red {background-color:red; height:50px; }
#blue {background-color:blue; height:50px; margin-top:30px; border:1px solid black;}
#blue p{ margin-top:20px; background:green;}

Browser Result

Margin Collapsing in IE 7

parent and child margin collapsing works differently in IE 7 and does not collapse when some kind of layout is specified for parent element. in our example we specified 300px width. So parent element does not need any border or padding to stop margin collapsing.

CSS Code

#parent{ background-color:yellow; width:300px; }
#red {background-color:red; height:50px; }
#blue {background-color:blue; height:50px; margin-top:30px;}
#blue p{ margin-top:20px; background:green;}

Browser Result

photo by Tailer Ransom

Comments (3)

  1. hi!,I like your writing so much! share we be in contact more approximately your article on AOL? I require an expert in this area to resolve my problem. May be that is you! Looking ahead to look you. – - Elegant London Escorts, 65-67 Brewer Street, Floor: 2, London W1F 9UP. Phone: 020 3011 2941

Comments are closed.