55

この写真でわかるように、上の境界線のない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>

ありがとう

4

7 に答える 7

92

を追加overflow:autoし.bodyて、マージンの崩壊を防ぐことができます。http://www.w3.org/TR/CSS2/box.html#collapsing-marginsを参照してください。

于 2009-09-08T15:57:11.197 に答える
9

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

緑色のコンテナーには境界線やパディングがないため、オレンジ色の要素のマージンを含むものは何もありません。緑のコンテナにマージンがあるかのように、一番上の要素とオレンジ色の要素の間でマージンが使用されます。

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

于 2009-09-08T15:56:53.710 に答える
1

paddingの代わりに使用margin：

.body .container {
    ...
    padding-top: 30px;
}
于 2009-09-08T15:45:55.133 に答える
1

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

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

#element最初の子要素にがあったため、プッシュダウンされていましたmargin-top: 30px。このCSSを使用すると、期待どおりに機能するようになりました:)すべてのケースで機能するかどうかはわかりません、YMMV。

于 2010-05-10T01:06:26.917 に答える
0

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

于 2009-09-08T15:50:03.537 に答える
0

このドキュメントを読みます: ボックス モデル - マージンの崩壊

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%;
}
于 2009-09-08T15:52:18.010 に答える
0

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

于 2010-02-20T01:07:53.990 に答える