Fusion des marges

  • Raccourci de la révision : CSS/Fusion_des_marges
  • Titre de la révision : Fusion des marges
  • ID de la révision : 183853
  • Créé :
  • Créateur : Elethiomel
  • Version actuelle ? Non
  • Commentaire /* Résumé */

Contenu de la révision

{{template.CSSRef()}} {{wiki.template('Traduction_à_relire')}}

Résumé

Les marges supérieures et inférieures des blocs sont parfois fusionnées en une seule marge dont la taille est celle de la plus grande des deux marges à combiner, un comportement connu sur le nom de fusion des marges {{mediawiki.external('Ndt: quand les <b>blocs</b> sont placés dans un flux <b>normal</b>')}}.

La fusion des marges se produit dans trois cas basiques :

Éléments adjacents
Les marges d'éléments frères adjacents sont fusionnées (à l'exception de l'élément frère qui aurait besoin d'être libéré (clear)). Par exemple :
<p>La marge inférieure de ce paragraphe est fusionnée...</p>
<p>...avec la marge supérieure de ce paragraphe.<p>
Parent et premier/dernier enfant
- S'il n'y a pas de bordure (border), d'espacement intérieur (padding), de contenu en-ligne (inline) ou de libération (clear) pour séparer la marge supérieure d'un bloc avec la marge supérieure de son premier bloc enfant...
- S'il n'y a pas de bordure (border), d'espacement intérieur (padding), de contenu en-ligne (inline), de hauteur (height), de hauteur minimum (min-height) ou de hauteur maximum (max-height) pour séparer la marge inférieure d'un bloc avec la marge inférieure de son dernier bloc enfant, alors les marges fusionnent. La fusion des marges prend fin hors du parent.
Blocs vides
S'il n'y a aucune bordure (border), aucun espacement intérieur (padding), aucun contenu en-ligne (inline), aucune hauteur (height) ou aucune hauteur minimale (min-height) pour séparer la marge supérieure d'un bloc de sa marge inférieure, alors les marges supérieures et inférieures fusionnent.

De plus complexes fusions de marges (avec plus de deux marges) se produisent quand ces cas sont combinés.

Ces règles s'appliquent même lorsque les marges sont nulles (margin: 0;), ainsi la marge du premier/dernier enfant se termine hors de son parent (en accord avec les règles précédentes), que la marge du parent soit nulle ou non.

Quand des marges négatives sont invoquées, la taille de la marge fusionnée est la soustraction de la plus petite marge négative en valeur absolue à la plus grande marge positive {{mediawiki.external('Ndt: s\'il n\'y a pas de marge positive alors zéro est utilisé')}}.

Les marges des blocs flottants et de tout autre bloc ne fusionnent jamais, comme les marges entre des blocs absolument et relativement positionnés.

Spécifications

Interwiki Languages Links

{{ wiki.languages( { "en": "en/CSS/margin_collapsing" } ) }}

Source de la révision

<p> 
{{template.CSSRef()}}
{{wiki.template('Traduction_à_relire')}}
</p>
<h3 name="R.C3.A9sum.C3.A9"> Résumé </h3>
<p>Les marges <a href="fr/CSS/margin-top">supérieures</a> et <a href="fr/CSS/margin-bottom">inférieures</a> des blocs sont parfois fusionnées en une seule marge dont la taille est celle de la plus grande des deux marges à combiner, un comportement connu sur le nom de <i>fusion des marges</i> {{mediawiki.external('Ndt: quand les &lt;b&gt;blocs&lt;/b&gt; sont placés dans un flux &lt;b&gt;normal&lt;/b&gt;')}}.
</p><p>La fusion des marges se produit dans trois cas basiques :
</p>
<dl><dt>Éléments adjacents
</dt><dd>Les marges d'éléments frères adjacents sont fusionnées (à l'exception de l'élément frère qui aurait besoin d'être <a href="fr/CSS/clear">libéré</a> (clear)). Par exemple :
</dd></dl>
<pre class="eval">&lt;p&gt;La marge inférieure de ce paragraphe est fusionnée...&lt;/p&gt;
&lt;p&gt;...avec la marge supérieure de ce paragraphe.&lt;p&gt;
</pre>
<dl><dt>Parent et premier/dernier enfant
</dt><dd>- S'il n'y a pas de bordure (border), d'espacement intérieur (padding), de contenu en-ligne (inline) ou de <i><a href="fr/CSS/clear">libération</a></i> (clear) pour séparer la marge <a href="fr/CSS/margin-top">supérieure</a> d'un bloc avec la marge <a href="fr/CSS/margin-top">supérieure</a> de son premier bloc enfant...
</dd><dd>- S'il n'y a pas de bordure (border), d'espacement intérieur (padding), de contenu en-ligne (inline), de hauteur (height), de hauteur minimum (min-height) ou de hauteur maximum (max-height) pour séparer la marge <a href="fr/CSS/margin-bottom">inférieure</a> d'un bloc avec la marge <a href="fr/CSS/margin-bottom">inférieure</a> de son dernier bloc enfant, alors les marges fusionnent. La fusion des marges prend fin hors du parent.
</dd></dl>
<dl><dt>Blocs vides
</dt><dd>S'il n'y a aucune bordure (border), aucun espacement intérieur (padding), aucun contenu en-ligne (inline), aucune hauteur (height) ou aucune hauteur minimale (min-height) pour séparer la <a href="fr/CSS/margin-top">marge supérieure</a> d'un bloc de sa <a href="fr/CSS/margin-bottom">marge inférieure</a>, alors les marges supérieures et inférieures fusionnent.
</dd></dl>
<p>De plus complexes fusions de marges (avec plus de deux marges) se produisent quand ces cas sont combinés.
</p><p>Ces règles s'appliquent même lorsque les marges sont nulles (<code>margin: 0;</code>), ainsi la marge du premier/dernier enfant se termine hors de son parent (en accord avec les règles précédentes), que la marge du parent soit nulle ou non.
</p><p>Quand des marges négatives sont invoquées, la taille de la marge fusionnée est la soustraction de la plus petite marge négative en valeur absolue à la plus grande marge positive {{mediawiki.external('Ndt: s\'il n\'y a pas de marge positive alors zéro est utilisé')}}.
</p><p>Les marges des blocs <a href="fr/CSS/float">flottants</a> et de tout autre bloc ne fusionnent jamais, comme les marges entre des blocs absolument et relativement <a href="fr/CSS/position">positionnés</a>.
</p>
<h3 name="Sp.C3.A9cifications"> Spécifications </h3>
<ul><li> <a class="external" href="http://www.yoyodesign.org/doc/w3c/css1/#vertical-formatting">La mise en forme verticale CSS 1 (fr)</a>
</li><li> <a class="external" href="http://www.yoyodesign.org/doc/w3c/css2/box.html#collapsing-margins">La fusion des marges CSS 2 (fr)</a>
</li><li> <a class="external" href="http://www.w3.org/TR/CSS21/box.html#collapsing-margins">La fusion des marges CSS 2.1 (en)</a>
</li></ul>
<p><span class="comment">Interwiki Languages Links</span>
</p>{{ wiki.languages( { "en": "en/CSS/margin_collapsing" } ) }}
Revenir à cette révision