Want to share your CSS expertise with others? Apply to the MDN Fellowship by April 1! http://mzl.la/MDNFellowship

mozilla

Compare Revisions

Margin collapsing

Change Revisions

Revision 68809:

Revision 68809 by natbob on

Revision 68810:

Revision 68810 by Jürgen Jeka on

Title:
Margin collapsing
Margin collapsing
Slug:
CSS/margin_collapsing
CSS/margin_collapsing
Tags:
css, "CSS Reference"
css, "CSS Reference"
Content:

Revision 68809
Revision 68810
n10    <h3 name="Summary">n10    <h3>
n25        <pre class="eval">n25        <pre>
n40        If there is no border, padding, inline content, height, on40        If there is no border, padding, inline content, height, o
>r min-height to separate a block's <a href="/en/CSS/margin-top" t>r min-height to separate a block's <a href="/en/CSS/margin-top" t
>itle="en/CSS/margin-top">margin-top</a> from its <a href="/en/CSS>itle="en/CSS/margin-top">margin-top</a> from its <a href="/en/CSS
>/margin-bottom" title="en/CSS/margin-bottom">margin-bottom</a>, t>/margin-bottom" title="en/CSS/margin-bottom">margin-bottom</a>, t
>hen its top and bottom margins collapse.&nbsp; More complex margi>hen its top and bottom margins collapse.
>n collapsing (of more than two margins) occurs when these cases a 
>re combined. 
41        <p>
42          These rules apply even to margins that are zero, so the
> margin of a first/last child ends up outside its parent (accordi 
>ng to the rules above) whether or not the parent's margin is zero 
>. 
43        </p>
44        <p>
45          When negative margins are involved, the size of the col
>lapsed margin is the sum of the largest positive margin and the s 
>mallest (most negative) negative margin. 
46        </p>
47        <p>
48          Margins of <a href="/en/CSS/float" title="en/CSS/float"
>>floating</a> and <a href="/en/CSS/position" title="en/CSS/positi 
>on">absolutely positioned</a> elements never collapse. 
49        </p>
50        <h3 name="Specifications">
51          Specifications
52        </h3>
53        <ul>
54          <li>
55            <a class="external" href="http://www.w3.org/TR/REC-CS
>S1#vertical-formatting">CSS 1</a> 
56          </li>
57          <li>
58            <a class="external" href="http://www.w3.org/TR/CSS21/
>box.html#collapsing-margins">CSS 2.1</a> 
59          </li>
60        </ul>
tt43    <p>
44      More complex margin collapsing (of more than two margins) o
 >ccurs when these cases are combined.
45    </p>
46    <p>
47      These rules apply even to margins that are zero, so the mar
 >gin of a first/last child ends up outside its parent (according t
 >o the rules above) whether or not the parent's margin is zero.
48    </p>
49    <p>
50      When negative margins are involved, the size of the collaps
 >ed margin is the sum of the largest positive margin and the small
 >est (most negative) negative margin.
51    </p>
52    <p>
53      Margins of <a href="/en/CSS/float" title="en/CSS/float">flo
 >ating</a> and <a href="/en/CSS/position" title="en/CSS/position">
 >absolutely positioned</a> elements never collapse.
54    </p>
55    <h3>
56      Specifications
57    </h3>
58    <ul>
59      <li>
60        <a class="external" href="http://www.w3.org/TR/CSS21/box.
 >html#collapsing-margins">CSS 2.1 Box #Collapsing_margins</a>
61      </li>
62    </ul>
63    <h3>
64      See also
65    </h3>
66    <p>
67      {{ CSS_Reference:Margin() }}
68    </p>

Back to History