CSS：マージントップ親のは、何の境界線を持っていません

https://stackoverflow.com/questions/1394724

21-09-2019
|

質問

あなたはで見ることができるようにには、私は緑の内側オレンジdivを持っているrel="noreferrer">ノートップボーダーと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>

おかげ

解決

あなたは余裕-崩壊を防ぐためにoverflow:autoに.bodyを追加することができます。 http://www.w3.org/TR/CSS2/boxを参照してください。 htmlの＃崩壊-余白の

他のヒント

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

緑色のコンテナは任意のボーダーやパディングを持っていないとして、

は、オレンジ色の要素のマージンが含まれているものは何もありません。マージンは、トップ要素と緑のコンテナが余裕を持っているでしょうかのようにオレンジ色の要素との間に使用されます。

を使用する代わりに、オレンジ色の要素のマージンの緑色のコンテナに詰めます。

の代わりにpaddingの使用marginます：

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

はわからないこれはあなたのケースで動作する場合、私はちょうど次のCSSプロパティでこれを解決しました。

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

それの最初の子要素が#elementがあったので

margin-top: 30pxが押し下げされていました。このCSSでは、それが今、期待通りに動作します:)わからない、それはすべてのケースのために働くだろう場合、YMMVます。

あなたはどちらか、緑色のボックスの上にpadding-top: 30を追加top: 30pxとオレンジのボックスに相対的な位置を使用するか、オレンジ色のボックスをフロートと同じmargin-top: 30pxを使用することができます。

あなたはこの文書をお読みください。ボックスモデル - マージン崩壊する

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%;
}

方法がわからないハックこの音が、どのように透明の境界線を追加することについてはどうですか？

ライセンス： CC-BY-SA と帰属

所属していません StackOverflow