Comment empêcher Margin-Top d'affecter un élément parent sans bordure ?

Résoudre le problème de la marge supérieure CSS dans les éléments parents sans bordure

Lorsque l'élément parent n'a pas de bordure supérieure, la marge du Le haut de l'élément enfant peut entraîner le déplacement de l'élément parent vers le bas. Ce problème peut être résolu en ajoutant une bordure supérieure à l'élément parent, mais cela va à l'encontre de l'exigence initiale.

Cependant, il existe une solution alternative qui empêche que cela se produise :

Appliquez overflow:auto à l'élément parent

en ajoutant overflow : With automatiquement appliqué à un élément parent, vous pouvez forcer son conteneur à contenir son contenu, empêchant ainsi la réduction des marges. La réduction des marges est un comportement en CSS qui fusionne les marges adjacentes en une seule marge.

Dans l'exemple donné, vous pouvez ajouter le CSS suivant à la classe .body :

.body {
  overflow: auto;
}

Cela empêchera la marge supérieure de faire descendre le .body tout en gardant sa cadre supérieur transparent.

Référence

• [Spécification CSS2 du W3C : effondrement des marges](http://www.w3.org/TR/CSS2/box.html# collapsing -marges)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!