このCSSマージントップスタイルが機能しないのはなぜですか？

別のdiv内のdivにマージン値を追加しようとします。トップ値以外はすべて正常に機能し、無視されているようです。しかし、なぜ？

私が期待したこと：

私が得るもの：

コード：

#outer {
    	width: 500px; 
    	height: 200px; 
    	background: #FFCCCC;
    	margin: 50px auto 0 auto;
    	display: block;
}
#inner {
    	background: #FFCC33;
    	margin: 50px 50px 50px 50px;
    	padding: 10px;
    	display: block;
}

<div id="outer">
  <div id="inner">
  	Hello world!
  </div>
</div>

W3Schoolは、マージンがこのように動作する理由を説明していません。

実際には、#inner要素の上余白が要素の上端に折りたたまれ#outer、#outer余白だけがそのまま残ります（画像には表示されていません）。マージンが等しいため、両方のボックスの上端は互いに揃っています。

W3C仕様の関連ポイントは次のとおりです。

8.3.1マージンの縮小

CSSでは、2つ以上のボックスの隣接するマージン（兄弟である場合とそうでない場合がある）を組み合わせて1つのマージンを形成できます。このように組み合わされたマージンは崩壊すると言われ、結果として生じる結合マージンは崩壊マージンと呼ばれます。

隣接する垂直マージンが崩れる[...]

次の場合に限り、2つのマージンが隣接します。

• どちらも同じブロックフォーマットコンテキストに参加するインフローブロックレベルボックスに属しています
• ラインボックスなし、クリアランスなし、パディングなし、境界線なし
• どちらも垂直方向に隣接するボックスエッジに属します。つまり、次のペアのいずれかを形成します。
  • ボックスの上マージンと最初のインフローの子の上マージン

マージンが崩れないようにするには、次のいずれかを実行できます。

• どちらかのdiv要素を浮かせます
• いずれかのdiv要素をインラインブロックにする
• セットoverflowの#outerに対してauto（または以外の値visible）

上記のオプションがマージンの崩壊を防ぐ理由は次のとおりです。

• フロートボックスと他のボックスの間のマージンは折りたたまれません（フロートとフロー内の子の間もです）。
• 新しいブロックのフォーマットコンテキストを確立する要素の余白（フロートや 'visible'以外の 'overflow'を持つ要素など）は、インフローの子では折りたたまれません。
• インラインブロックボックスの余白は折りたたまれません（インフローの子の場合でも）。

左マージンと右マージンは、次の理由で期待どおりに動作します。

水平マージンは決して崩れません。

display: inline-block;内側のdivで使用してみてください。

#outer {
    width:500px; 
    height:200px; 
    background:#FFCCCC;
    margin:50px auto 0 auto;
    display:block;
}
#inner {
    background:#FFCC33;
    margin:50px 50px 50px 50px;
    padding:10px;
    display:inline-block;
}

@BoltClockが述べたことはかなりしっかりしています。ここで、この問題の解決策をいくつか追加したいと思います。このw3c_collapsingマージンを確認してください。緑の部分は、この問題をどのように解決できるかについて考えられている可能性があります。

解決策1

フロートボックスと他のボックスの間のマージンは折りたたまれません（フロートとフロー内の子の間もです）。

つまりfloat:left、#outerまたは#inner demo1に追加できます。

また、マージンfloatが無効になることに注意してくださいauto。

解決策2

新しいブロックのフォーマットコンテキストを確立する要素の余白（フロートや 'visible'以外の 'overflow'を持つ要素など）は、インフローの子では折りたたまれません。

以外にvisible、レットのput overflow: hiddenへ#outer。そして、この方法はかなりシンプルでまともです。私はそれが好きです。

#outer{
    width: 500px;
    height: 200px;
    background: #FFCCCC;
    margin: 50px auto;
    overflow: hidden;
}
#inner {
    background: #FFCC33;
    height: 50px;
    margin: 50px;
}

解決策3

絶対的に配置されたボックスのマージンは折りたたまれません（インフローの子があったとしても）。

#outer{
    width: 500px;
    height: 200px;
    background: #FFCCCC;
    margin: 50px auto;
    position: absolute; 
}
#inner{
    background: #FFCC33;
    height: 50px;
    margin: 50px;
}

または

#outer{
    width: 500px;
    height: 200px;
    background: #FFCCCC;
    margin: 50px auto;
    position: relative; 
}
#inner {
    background: #FFCC33;
    height: 50px;
    margin: 50px;
    position: absolute;
}

これら2つの方法は、通常のフローを中断します div

解決策4

インラインブロックボックスの余白は折りたたまれません（インフローの子の場合でも）。

@enderskillと同じ

ソリューション5

流入ブロックレベル要素の下部マージンは、兄弟にクリアランスがない限り、常に次の流入ブロックレベル兄弟の上部マージンと共に縮小します。

これは兄弟間の折りたたみマージンであるため、この質問とはあまり関係がありません。これは一般に、トップボックスにmargin-bottom: 30pxあり、兄弟ボックスにがあるかどうかを意味しますmargin-top: 10px。それらの間の総マージンがある30pxの代わりに40px。

解決策6

要素に上部ボーダー、上部パディング、および子のクリアランスがない場合、インフローブロック要素の上マージンは、最初のインフローブロックレベルの子の上マージンで折りたたまれます。

これは非常に興味深いもので、上枠線を1つだけ追加できます。

#outer{
    width: 500px;
    height: 200px;
    background: #FFCCCC;
    margin: 50px auto;
    border-top: 1px solid red;

}
#inner {
    background: #FFCC33;
    height: 50px;
    margin: 50px;

}

また<div>、デフォルトではブロックレベルであるため、意図的に宣言する必要はありません。私の初心者の評判のため、2つ以上のリンクと画像を投稿できないのは申し訳ありません。少なくとも、次に似たような問題が発生したときに問題がどこから発生しているかがわかります。

あなたが持っているものがうまくいかない理由はわかりませんが、追加することができます

overflow: auto;

外側のdivに。

にパディングを追加する#outerと機能します。

デモ

#outer {
    width:500px; 
    height:200px; 
    background:#FFCCCC;
    margin:50px auto 0 auto;
    display:block;
    padding-top:1px;
}

正確な理由はわかりませんが、内部CSSを

display:inline-block;

うまくいくようです。

「なぜ」（折りたたみマージンのあるものである必要があります）には答えませんが、あなたがしようとしていることを行う最も簡単で最も論理的な方法は、外側のdivに追加padding-topすることです：

http://jsfiddle.net/hpU5d/1/

細かい注意- display:block;コード内にブロックしないように指示しているものがない限り、divをに設定する必要はありません。

これを試して：

#outer {
    width:500px; 
    height:200px; 
    background:#FFCCCC;
    margin:50px auto 0 auto;
    display:table;
}
#inner {
    background:#FFCC33;
    margin:50px 50px 50px 50px;
    padding:10px;
    display:block;
}​

http://jsfiddle.net/7AXTf/

幸運を

私は設定推測位置のプロパティ#innerのにdiv要素を相対することにも効果を達成するのを助けることがあります。しかし、とにかく、IE9の質問に貼り付けられた元のコードと最新のGoogle Chromeを試したところ、変更を加えなくても望ましい効果が得られました。

padding-top:50px外側のdivに使用します。このようなもの：

#outer {
    width:500px; 
    height:200px; 
    background:#FFCCCC;
    margin:50px auto 0 auto;
    display:table;}

注：パディングするとdivのサイズが大きくなります。この場合、divのサイズが重要であれば、特定の高さでなければならないかどうかを意味します。高さを50px減らします。

#outer {
    width:500px; 
    height:150px; 
    background:#FFCCCC;
    margin:50px auto 0 auto;
    display:table;}

何よりも重要なことを試したことがありますか？

margin:50px 50px 50px 50px !important;

簡単な解決策として、子要素を次のdivような要素にラップしてみてください-

<div id="outer">
   <div class="divadjust" style="padding-top: 1px">
      <div id="inner">
         Hello world!
      </div>
   </div>
</div>

中間とdivのinnerパディングのため、divのマージンが崩れません。したがって、論理的には、divの既存のマージンに加えて、追加のスペースがあります。1pxouterinner1pxinner