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 deux ou plusieurs blocs adjacents se combinent en une seule marge. La taille de cette marge commune est déterminée par la valeur la plus grande des marges qui se chevauchent.

Principales règles du chevauchement :

Seules les marges verticales (margin-top et margin-bottom) se chevauchent. Les marges horizontales ne se chevauchent pas.
Se chevauchent uniquement les marges d'éléments adjacents s'il n'y a pas d'autres éléments, de padding, de bordure ou de contenu de bloc entre eux.
La marge supérieure du premier enfant se chevauchera avec la marge supérieure de son parent si aucun padding, border ou autre contenu n'est entre eux.
La marge inférieure du dernier enfant se chevauchera avec la marge inférieure de son parent si aucun padding, border ou autre contenu n'est entre eux.
Les marges supérieure et inférieure d'un élément vide peuvent se chevaucher si l'élément n'a pas de padding, border ou contenu.
Si l'une des marges qui se chevauchent est négative, la taille finale est la somme des valeurs positives et négatives (ou la valeur absolue si les deux sont négatives et que la somme est inférieure à zéro).

Exemple :

<div class="box1">Élément 1</div>
<div class="box2">Élément 2</div>

.box1 {
  margin-bottom: 20px;
}

.box2 {
  margin-top: 30px;
}

Dans ce cas, la distance verticale entre box1 et box2 sera de 30px (la valeur maximale entre 20px et 30px), et non 50px.

Méthodes pour éviter le chevauchement :

Ajouter du padding ou une border entre les éléments.
Créer un nouveau bloc de formatage (par exemple, en utilisant overflow: hidden, display: flow-root ou des éléments flottants).
Utiliser display: inline-block, display: flex ou display: grid pour les éléments.
Utiliser le positionnement absolu.

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