Q&A
以下のようなHTMLがあります。
html
1<body> 2 <nav> 3 <h1>A</h1> 4 </nav> 5 6 <article> 7 <h1>B</h1> 8 </article> 9</body>
ブラウザでは以下のように表示され、Chromeのデベロッパー･ツールで確認すると、<h1>の上部に19.920のマージンがあることが分かりました。
ここで<nav>をフローティングすると
css
1nav { 2 float: left; 3}
以下のように「A」の縦位置が少し下にずれてしまいます。
「B」がAの右側に回り込むのは理解できるのですが、なぜ「A」の縦位置がずれてしまうのでしょうか？
確認したところ、どうやら「A」のマージンの上端は、元のようにページの上端ではなく、「B」のコンテンツの上端に揃えられているようです。
いろいろと調べたのですが、このような挙動となる元の仕様を見つけることができませんでした。
ブラウザはChromeとFirefoxの最新版、共に同じ挙動でした。
ご存じの方がおられましたら何かアドバイスをいただけると助かります。
回答1件
0
ベストアンサー
ここらへんでは。
【マージンの相殺 - CSS: カスケーディングスタイルシート | MDN】
https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing
浮動する要素 と 絶対位置指定された要素 では、マージンの相殺は起きません。
投稿2020/05/09 04:24
総合スコア69407
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/05/09 04:45 編集