Qu'est-ce que le collapse des bordures en CSS…

Le chevauchement des marges (margin collapsing) est un phénomène en CSS où les marges verticales de blocs adjacents se fusionnent en une seule. La taille de cette marge fusionnée est déterminée comme la valeur maximale des marges qui se chevauchent.

Le chevauchement se produit dans les cas suivants :

Entre éléments adjacents : Les marges verticales de deux éléments voisins se chevauchent.
```
<p>Paragraphe 1</p>
<p>Paragraphe 2</p>
```
Si <p> a margin-bottom et margin-top respectivement, ces marges peuvent se chevaucher.
Entre un parent et son premier/dernier enfant : Si le parent n'a pas de border, padding, display: flex, display: grid, overflow: hidden ou d'autres propriétés créant un contexte de formatage, sa marge supérieure peut se chevaucher avec le margin-top du premier enfant. De même, la marge inférieure du parent peut se chevaucher avec le margin-bottom du dernier enfant.
```
<div class="parent">
  <p class="child">Élément enfant</p>
</div>
```
Sur un élément vide : Si un élément n'a pas de contenu (height: 0, sans border ni padding), ses marges supérieure et inférieure peuvent se chevaucher.
```
<div class="empty"></div>
```

Tableau illustrant les résultats du chevauchement :

Marge 1	Marge 2	Résultat du chevauchement
10px	15px	15px
20px	-5px	20px
-10px	-15px	-10px

Le chevauchement des marges ne se produit que dans la direction verticale (margin-top et margin-bottom). Les marges horizontales (margin-left et margin-right) ne se chevauchent jamais.

Il existe des moyens d'empêcher le chevauchement, comme ajouter une border, un padding, utiliser display: flex, display: grid, overflow: hidden ou créer un nouveau contexte de formatage du bloc avec display: flow-root.

Qu'est-ce que le collapse des bordures en CSS?