Why are my div margins overlapping and how can I fix it?

html css margins
Atif picture Atif · Oct 11, 2010 · Viewed 81k times · Source

I don't understand why the margins of these divs are overlapping.

picture

Answer

MatTheCat picture MatTheCat · Oct 11, 2010

I think it's a collapsed margin. Only the largest margin between the bottom of the first element and the top of the second is taken into account.

It is quite normal to don't have too much space between two paragraphs eg.

You cannot avoid that with two adjacent elements so you have to enlarge or reduce the larger margin.

EDIT: cf. W3C

Two margins are adjoining if and only if:

  • both belong to in-flow block-level boxes that participate in the same block formatting context
  • no line boxes, no clearance, no padding and no border separate them
  • both belong to vertically-adjacent box edges

So there is no collapsing with float which takes the element out of the flow.

Related questions

Margin on every element except last

I have 2 lines of CSS for setting margin on every element except the last one. Is there a way to combine it into 1 line? This is what I have currently(working): .work img { margin-right: 10px; } .work img:last { margin-right: 0px; } …

Read More
margin on h1 element inside a div

I have a div container which has a h1 element within it: <div id="header"> <h1>Enlighten Designs</h1> </div> I have applied a margin-top,a margin-left and a margin-right to the …

Read More
How to horizontally center a <div>

How can I horizontally center a <div> within another <div> using CSS? <div id="outer"> <div id="inner">Foo foo</div> </div>

Read More