Comment puis-je empêcher la marge d'une division enfant d'affecter la hauteur d'une division parent sans bordure ?

CSS : Div parent avec marge supérieure et sans bordure

Dans le scénario décrit, un div orange enfant est défini avec une marge supérieure de 30 px à l'intérieur un div parent vert sans bordure supérieure. Le problème survient lorsque la marge pousse le div parent vers le bas, même si une bordure supérieure n'est pas souhaitée.

Pour résoudre ce problème, tout en conservant le div parent sans bordure, envisagez d'implémenter ce qui suit :

.body {
    overflow: auto;
}

En ajoutant « overflow: auto » au div parent « .body », vous invoquez le comportement de réduction de la marge du navigateur. Cela permet à la marge supérieure du div enfant d'être contenue dans le div parent sans s'étendre au-delà de ses limites.

Cette approche garantit que le div vert reste sans bordure tout en empêchant l'effondrement de la marge, permettant ainsi un positionnement correct du div orange enfant. sans provoquer de changements indésirables dans la hauteur du div parent.

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!