1. ホーム
  2. ハイパーリンク

[解決済み】このCSSのmargin-topスタイルが機能しないのはなぜですか?

2022-04-30 15:41:23

質問

divの中のdivにmarginの値を追加しようとしています。topの値以外はすべて正常に動作しますが、無視されるようです。しかし、なぜでしょうか?

期待したこと

得られるもの

コード

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

W3Schools は、なぜマージンがこのような動作をするのか、説明がありません。

解決方法は?

実際に表示されているのは #inner 要素 折りたたみ の上端にある #outer 要素のみを残し #outer のマージンはそのままです(画像には写っていませんが)。マージンが同じなので、両方のボックスの上端は互いに同じ高さになります。

以下は、W3Cの仕様書から該当箇所を抜粋したものです。

8.3.1 余白の折りたたみ

CSSでは、2つ以上のボックスの隣接するマージン(兄弟である場合もそうでない場合もある)を組み合わせて、1つのマージンを形成することができる。このように結合されたマージンは、次のように言われます。 折りたたむ と呼ばれ、結合されたマージンは 折りたたみ余白 .

隣接する垂直方向の余白の折りたたみ [...]

<ブロッククオート

2つの余白は 隣接 の場合のみです。

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

マージンが崩れないようにするには、以下のいずれかを行います。

上記のオプションでマージンが崩れないようにする理由は。

  • フロートされたボックスと他のボックスの間のマージンは折りたたまれません(フロートとそのフロー内の子の間でも折りたたまれません)。
  • 新しいブロックフォーマットコンテキストを確立する要素(フロートや 'visible' 以外の 'overflow' を持つ要素など)のマージンは、それらのインフロー子と共に折りたたまれることはない。
  • インラインブロックボックスの余白は(フロー内の子であっても)折りたたまれない。

左右の余白が期待通りの挙動をするのは。

水平方向の余白が崩れることはありません。