CSSマージン崩壊：なぜマージントップは親要素を動かすのですか？

CSSマージン崩壊の詳細な説明：マージンの問題を巧みに解決する

CSSレイアウトを学習する場合、 margin属性は、多くの場合、予期しない結果、特に「マージン崩壊」現象をもたらします。この記事では、ケースを使用して、マージン崩壊の原因と解を深く分析します。

質問： 1つで仮定します<canvas></canvas>内部の要素をネストしました<div>要素（IDは「1」）、「1」の<code>margin-topを設定します。奇妙なことに、 margin-topを設定した後、「1つの」要素が下に移動するだけでなく、<canvas></canvas>要素も下に移動しました。

コード構造（簡素化）：

HTML： <canvas><div id="one">...</div></canvas>

css： #one { margin-top: 20px; } （他のスタイルはここで省略されています）

分析：これはCSSマージン崩壊です。親要素の高さがautoの場合、子要素はブロックレベルの要素であり、親要素にはpaddingとborderがありません。親要素の高さは、子要素のmargin-topの影響を受けます。<canvas></canvas>要素の高さは自動的に計算されますが、「1」はブロックレベルの要素、そのmargin-topであり、<canvas></canvas>の上のマージン<canvas></canvas>体の高さは増加し、それにより全体として下向きに動きます。

解決策：マージンの崩壊を避ける方法はいくつかあります。

1. 親要素の高さを設定します：<canvas></canvas>この要素は、 height: 100px; 。
2. 境界線または内側のマージンを追加します：境界線などの親要素にborderまたはpadding追加border: 1px solid #ccc;またはpadding: 10px; 。
3. 外側の縁の代わりに内側のマージンを使用します。 margin-top padding-topに置き換えます。
4. フローティングまたは絶対的なポジショニングを使用します： float: left;またはposition: absolute;子要素「1」の場合。

マージン崩壊のメカニズムを理解することにより、CSSレイアウトをよりよく制御し、同様の問題を回避できます。