Apprends Effondrement des marges et débordement

Comprendre l'effondrement des marges

L'effondrement des marges (margin collapse) est l'un des comportements les plus déroutants en CSS. Il se produit lorsque les marges verticales d'éléments de bloc adjacents se chevauchent, et au lieu de s'additionner, seule la plus grande marge est appliquée.

Quand les marges s'effondrent

Frères adjacents — Quand deux éléments de bloc s'empilent verticalement, la marge inférieure du premier et la marge supérieure du second s'effondrent en une seule marge égale à la plus grande des deux.
Parent et premier/dernier enfant — Si un parent n'a ni bordure, ni padding, ni contenu inline le séparant de son enfant, la marge supérieure de l'enfant s'effondrera avec la marge supérieure du parent (et de même pour les marges inférieures).
Blocs vides — Si un élément de bloc n'a ni contenu, ni padding, ni bordure, ni hauteur, ses marges supérieure et inférieure s'effondrent l'une sur l'autre.

Quand les marges ne s'effondrent PAS

Les marges horizontales ne s'effondrent jamais.
Les marges des éléments flottants ou positionnés en absolu ne s'effondrent pas.
Les marges des flex items ou grid items ne s'effondrent pas.
Les éléments avec overflow défini sur autre chose que visible créent un nouveau Block Formatting Context (BFC) et empêchent l'effondrement des marges avec leurs enfants.

Exemple d'effondrement des marges

html

<style>
  .box {
    background-color: #e0e0e0;
    padding: 16px;
  }

  .box-a {
    margin-bottom: 30px;
  }

  .box-b {
    margin-top: 20px;
  }

  /* The gap between A and B is 30px, not 50px.
     The margins collapse to the larger value. */

  /* Fix: Add overflow: auto to the parent to create a BFC */
  .no-collapse {
    overflow: auto;
  }
</style>

<div class="box box-a">Box A (margin-bottom: 30px)</div>
<div class="box box-b">Box B (margin-top: 20px)</div>
<p>The gap above is 30px, not 50px — margins collapsed.</p>

La propriété overflow

La propriété overflow contrôle ce qui se passe lorsque le contenu est trop grand pour son conteneur.

Valeur	Comportement
`visible`	Par défaut. Le contenu déborde de la boîte et est visible à l'extérieur.
`hidden`	Le contenu est rogné à la limite de la boîte. Pas de barre de défilement.
`scroll`	Le contenu est rogné, mais les barres de défilement sont toujours affichées (même si pas nécessaire).
`auto`	Le contenu est rogné si nécessaire, et les barres de défilement n'apparaissent que si besoin.

Tu peux aussi contrôler chaque axe indépendamment avec overflow-x et overflow-y.

text-overflow

La propriété text-overflow gère comment le texte inline débordant est signalé à l'utilisateur. La valeur la plus utile est ellipsis, qui affiche ... quand le texte est tronqué :

css

.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Les trois propriétés sont requises pour que l'ellipse fonctionne : white-space: nowrap empêche le retour à la ligne, overflow: hidden rogne le contenu, et text-overflow: ellipsis ajoute les points de suspension.

Effondrement des marges et débordement