[解決済み】この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つの余白は 隣接 の場合のみです。
- 両方が同じブロックフォーマットコンテキストに参加するインフローブロックレベルボックスに属している
- 両者はラインボックス、クリアランス、パディング、ボーダーで区切られていない
-
の両方が垂直方向に隣接するボックスエッジに属している、つまり、次のペアのいずれかを形成している。
- ボックスの上端マージンとその最初のインフロー子の上端マージン
マージンが崩れないようにするには、以下のいずれかを行います。
- のどちらかをフロートさせます。
div
要素- のどちらかを作成します。
div
要素 インラインブロック- 設定
overflow
の#outer
からauto
(またはvisible
)
上記のオプションでマージンが崩れないようにする理由は。
- フロートされたボックスと他のボックスの間のマージンは折りたたまれません(フロートとそのフロー内の子の間でも折りたたまれません)。
- 新しいブロックフォーマットコンテキストを確立する要素(フロートや 'visible' 以外の 'overflow' を持つ要素など)のマージンは、それらのインフロー子と共に折りたたまれることはない。
- インラインブロックボックスの余白は(フロー内の子であっても)折りたたまれない。
左右の余白が期待通りの挙動をするのは。
水平方向の余白が崩れることはありません。
関連
-
[解決済み] 名前が''の無効なフォームコントロールはフォーカスされない
-
[解決済み】エラー。Body " の後の無効な CSS: 期待されるセレクタまたは at-rule は、4 行目の "{" でした。
-
[解決済み] CSS color vs. background-color vs. background?
-
[解決済み] ionic 4でion-buttonをセンタリングする方法は?[重複しています]
-
[解決済み] 入力のラジオ要素を水平に揃えるにはどうしたらいいですか?
-
[解決済み] CSSの三角形はどのように機能するのですか?
-
[解決済み] How do I style a <select> dropdown with only CSS?
-
[解決済み] セルフクローズスクリプトエレメントが機能しないのはなぜですか?
-
[解決済み] CSS 100% height と padding/margin の関係
-
[解決済み】なぜHTMLは "chucknorris "を色と見なすのか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】ラジオボタンの代わりに画像を使用する
-
[解決済み】エラー。Body " の後の無効な CSS: 期待されるセレクタまたは at-rule は、4 行目の "{" でした。
-
[解決済み】「選択されたファイルがありません」を変更しました。
-
[解決済み] HTMLでSVGを使用して三日月を描画する
-
[解決済み] will-change' や translateZ() ハックは 'transition: height' のパフォーマンスを向上させるか?
-
[解決済み] head」タグと「header」タグの本当の違いは何ですか?[重複】について]
-
[解決済み] divが重ならないようにするには?
-
[解決済み] Visual Studio Code CSSエラー「空のルールセットを使用しないでください」【終了しました
-
[解決済み] 画像をインラインで表示する方法
-
[解決済み] CSS margin terror; Marginは親要素の外側にスペースを追加する [duplicate] 。