CSS : Marge supérieure lorsque le parent n'a pas de bordure

Question

Comme vous pouvez le voir dans cette photo J'ai une orange. div à l'intérieur d'un vert div sans bordure supérieure. L'orange div a un 30px marge supérieure, mais il pousse aussi le vert div en bas. Bien sûr, l'ajout d'une bordure supérieure résoudra le problème, mais j'ai besoin de la couleur verte. div pour être sans bordure supérieure. Qu'est-ce que je peux faire ?

html :

<div class="header">Top</div>
<div class="body">
    <div class="container">Box</div>
</div>
<div class="foot">Bottom</div>

css :

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

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

Gracias

Answer 1

Vous pourriez ajouter overflow:auto a .body pour éviter l'effondrement des marges. Voir http://www.w3.org/TR/CSS2/box.html#collapsing-margins

Answer 2

Ce que vous expérimentez, c'est l'effondrement des marges. La marge ne spécifie pas une zone autour d'un élément, mais plutôt la distance minimale entre les éléments.

Comme le conteneur vert n'a pas de bordure ou de remplissage, il n'y a rien pour contenir la marge de l'élément orange. La marge est utilisée entre l'élément supérieur et l'élément orange comme si le conteneur vert avait la marge.

Utilisez un padding dans le conteneur vert au lieu d'une marge sur l'élément orange.

Answer 3

Utilice padding au lieu de margin :

.body .container {
    ...
    padding-top: 30px;
}

Answer 4

Je ne sais pas si cela fonctionnera dans votre cas, mais je viens de résoudre le problème avec les propriétés CSS suivantes

#element {
    padding-top: 1px;
    margin-top: -1px;
}

#element était poussé vers le bas parce que son premier élément enfant avait une valeur margin-top: 30px . Avec ce CSS, il fonctionne maintenant comme prévu :) Pas sûr que cela fonctionne dans tous les cas, YMMV.

Answer 5

Vous pouvez soit ajouter padding-top: 30 sur la boîte verte, utiliser le positionnement relatif sur la boîte orange avec top: 30px ou faites flotter la boîte orange et utilisez la même méthode. margin-top: 30px .