Pourquoi Margin-Top abaisse-t-il les divisions parentales et comment puis-je y remédier sans utiliser de bordures ?

Comment réparer la marge supérieure en poussant la div parent sans bordure

Lorsqu'un élément enfant avec une marge supérieure se trouve à l'intérieur d'un élément parent sans bordure supérieure, le margin peut faire baisser l'élément parent. Ce comportement est souvent indésirable. Une solution consiste à ajouter une bordure supérieure à l'élément parent, mais cela n'est pas toujours possible ou souhaitable.

Une solution alternative consiste à utiliser la propriété overflow: auto sur l'élément parent. Cela empêchera la marge de s'effondrer et de pousser l'élément parent vers le bas. Voici un exemple :

.body {
    border: 1px solid black;
    border-top: none;
    border-bottom: none;
    width: 150px;
    height: 112px;
    background-color: lightgreen;
    overflow: auto;
}

.body .container {
    background-color: blue;
    height: 50px;
    width: 50%;
    margin-top: 30px;
}

Avec ce changement, le div orange ne poussera plus vers le bas le div vert.

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!