Compare Revisions

Margin collapsing

Change Revisions

Revision 68807:

Revision 68807 by DBaron on

Revision 68808:

Revision 68808 by natbob on

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

Revision 68807
Revision 68808
n14      <a href="en/CSS/margin-top">Top</a> and <a href="en/CSS/marn14      <a href="/en/CSS/margin-top" title="en/CSS/margin-top">Top<
>gin-bottom">bottom</a> margins of blocks are sometimes combined (>/a> and <a href="/en/CSS/margin-bottom" title="en/CSS/margin-bott
>collapsed) into a single margin whose size is the largest of the >om">bottom</a> margins of blocks are sometimes combined (collapse
>margins combined into it, a behavior known as <b>margin collapsin>d) into a single margin whose size is the largest of the margins 
>g</b>.>combined into it, a behavior known as <strong>margin collapsing</
 >strong>.
n21        Adjacent siblings&lt;/dt&gt;n21        Adjacent siblings
n24        The margins of adjacent siblings are collapsed (except whn24        The margins of adjacent siblings are collapsed (except wh
>en the later sibling needs to be <a href="en/CSS/clear">cleared</>en the later sibling needs to be <a href="/en/CSS/clear" title="e
>a> past floats). For example:>n/CSS/clear">cleared</a> past floats). For example:
n29        <p>n
30          &lt;/dd&gt;
31        </p>
n34        Parent and first/last child&lt;/dt&gt;n31        Parent and first/last child
n37        If there is no border, padding, inline content, <i>or <a n34        If there is no border, padding, inline content, <em>or <a
>href="en/CSS/clear">clearance</a></i> to separate the <a href="en> href="/en/CSS/clear" title="en/CSS/clear">clearance</a></em> to 
>/CSS/margin-top">margin-top</a> of a block with the <a href="en/C>separate the <a href="/en/CSS/margin-top" title="en/CSS/margin-to
>SS/margin-top">margin-top</a> of its first child block, or no bor>p">margin-top</a> of a block with the <a href="/en/CSS/margin-top
>der, padding, inline content, <i>height, min-height, or max-heigh>" title="en/CSS/margin-top">margin-top</a> of its first child blo
>t</i> to separate the <a href="en/CSS/margin-bottom">margin-botto>ck, or no border, padding, inline content, <em>height, min-height
>m</a> of a block with the <a href="en/CSS/margin-bottom">margin-b>, or max-height</em> to separate the <a href="/en/CSS/margin-bott
>ottom</a> of its last child, then those margins collapse. The col>om" title="en/CSS/margin-bottom">margin-bottom</a> of a block wit
>lapsed margin ends up outside the parent. &lt;/dd&gt;>h the <a href="/en/CSS/margin-bottom" title="en/CSS/margin-bottom
 >">margin-bottom</a> of its last child, then those margins collaps
 >e. The collapsed margin ends up outside the parent. &lt;/dd&gt;
n40        Empty blocks&lt;/dt&gt;n37        Empty blocks
n43        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">ma>r min-height to separate a block's <a href="/en/CSS/margin-top" t
>rgin-top</a> from its <a href="en/CSS/margin-bottom">margin-botto>itle="en/CSS/margin-top">margin-top</a> from its <a href="/en/CSS
>m</a>, then its top and bottom margins collapse. &lt;/dd&gt; &lt;>/margin-bottom" title="en/CSS/margin-bottom">margin-bottom</a>, t
>/dt&gt; More complex margin collapsing (of more than two margins)>hen its top and bottom margins collapse. &lt;/dd&gt; &lt;/dt&gt; 
> occurs when these cases are combined.>More complex margin collapsing (of more than two margins) occurs 
 >when these cases are combined.
n51          Margins of <a href="en/CSS/float">floating</a> and <a hn48          Margins of <a href="/en/CSS/float" title="en/CSS/float"
>ref="en/CSS/position">absolutely positioned</a> elements never co>>floating</a> and <a href="/en/CSS/position" title="en/CSS/positi
>llapse.>on">absolutely positioned</a> elements never collapse.
tt62    </dl>
63    <p>
65    </dl>{{ languages( { "fr": "fr/CSS/Fusion_des_marges" } ) }}64      {{ languages( { "fr": "fr/CSS/Fusion_des_marges" } ) }}
65    </p>

Back to History