web-dev-qa-db-ja.com

CSS：親に境界線がない場合のマージントップ

この画像 を見るとわかるように、緑のdivの中にオレンジ色のdivがあり、上部に境界線がありません。オレンジdivには30px上部マージンですが、グリーンdivも押し下げています。もちろん、上部の境界線を追加すると問題が解決しますが、緑のdivを上部の境界線なしにする必要があります。私は何ができますか？

.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>

ありがとう

cssbordermargincollapse
52
Manny

あなたはoverflow:auto〜.bodyは、マージンの縮小を防ぎます。 http://www.w3.org/TR/CSS2/box.html#collapsing-margins を参照してください

87
Fabian

あなたが経験するのはマージンの崩壊です。マージンは要素の周囲の領域を指定するのではなく、要素間の最小距離を指定します。

緑のコンテナにはボーダーやパディングがないため、オレンジ色の要素のマージンを含めるものはありません。緑のコンテナにマージンがある場合と同様に、上部の要素とオレンジ色の要素の間にマージンが使用されます。

オレンジ色の要素のマージンの代わりに、緑のコンテナのパディングを使用します。

9
Guffa

paddingの代わりにmarginを使用：

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

これがあなたのケースでうまくいくかどうかはわかりませんが、私は次のCSSプロパティでこれを解決しました

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

#elementは最初の子要素にmargin-top: 30px。このCSSにより、期待どおりに動作するようになりました:)すべてのケースで機能するかどうか、YMMVではわかりません。

1
alex

緑色のボックスにpadding-top: 30を追加するか、top: 30pxを使用してオレンジ色のボックスに相対配置を使用するか、オレンジ色のボックスをフロートして同じmargin-top: 30pxを使用できます。

0
Jonathan Patt

このドキュメントを読みます： ボックスモデル-マージンの折りたたみ

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

これがどれほどハックに聞こえるかはわかりませんが、透明な境界線を追加するのはどうですか？

0
finferflu