web-dev-qa-db-fra.com

CSS: Margin-top lorsque le parent n'a pas de frontière

Comme vous pouvez le voir dans cette image , j'ai un div orange à l'intérieur d'un div vert sans bordure supérieure. L'orange div a un 30px marge supérieure, mais cela pousse également le vert div vers le bas. Bien sûr, l'ajout d'une bordure supérieure résoudra le problème, mais j'ai besoin que le vert div soit sans bordure supérieure. "Que pouvais-je faire?"

.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;
}
<div class="header">Top</div>
<div class="body">
        <div class="container">Box</div>
</div>
<div class="foot">Bottom</div>

Merci

cssbordermargincollapse
52
Manny

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

87
Fabian

Ce que vous ressentez, 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 rembourrage, 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 rembourrage dans le conteneur vert au lieu d'une marge sur l'élément orange.

9
Guffa

Utilisez padding au lieu de margin:

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

Je ne sais pas si cela fonctionnera dans votre cas, mais je viens de résoudre ce 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 un margin-top: 30px. Avec ce CSS, cela fonctionne maintenant comme prévu :) Je ne sais pas si cela fonctionnera pour tous les cas, YMMV.

1
alex

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

0
Jonathan Patt

Vous avez lu ce document: modèle de boîte - effondrement de la marge

CSS

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

.body .container {
    background-color: orange;
    height: 50px;
    width: 50%;
}
0
ranonE

Vous ne savez pas à quel point cela semble piraté, mais que diriez-vous d'ajouter une bordure transparente?

0
finferflu