CSS - Margin collision between 2 DIVs

Question

I have two DIV`s and i think I have a margin collision...

Example box


        
                      

              相关标签:
       
      

Answer 1

When we have two elements one withh margin-bottom and the next one with margin-top then in this case the browser will pick the maximum one rather than adding two margin(s).

It is well explained at site: http://www.thesstech.com/css-margin

Answer 2

<div style="margin-bottom: 20px;">Example box</div>
<div>Example box</div>

Answer 3

Just add 20px margin for the first div:

<div style="margin-bottom: 20px;">Example box</div>
<div>Example box</div>

example: http://jsfiddle.net/TW236/1/

Answer 4

As others have already said, this is known as collapsing margins:

8 Box model - 8.3.1 Collapsing margins

In CSS, the adjoining margins of two or more boxes (which might or might not be siblings) can combine to form a single margin. Margins that combine this way are said to collapse, and the resulting combined margin is called a collapsed margin.

In this case, they are sibling elements; therefore the following applies:

Margins between a floated box and any other box do not collapse (not even between a float and its in-flow children).

Floating one of the sibling elements would prevent the margins from collapsing:

EXAMPLE HERE

<div style="margin-bottom: 10px;">These are NOT</div>
<div style="margin-top: 10px; float:left;">collapsing</div>

Margins of inline-block boxes do not collapse (not even with their in-flow children).

Making an element inline-block would also prevent the margins from collapsing:

EXAMPLE HERE

<div style="margin-bottom: 10px;">These are NOT</div>
<div style="margin-top: 10px; display:inline-block;">collapsing</div>

---

Assuming the elements weren't siblings, you could add overflow:hidden to the parent element, as the following would then apply:

Margins of elements that establish new block formatting contexts (such as floats and elements with 'overflow' other than 'visible') do not collapse with their in-flow children.

Answer 5

then try something like in this example:

http://jsfiddle.net/TW236/3/

<div style="margin-bottom: 10px; display: inline-block;">Example box</div>
<div style="margin-top:10px;">Example box</div>