CSSマージン崩壊
2 つのマージンが 1 つのマージンに折りたたまれることがあります。
マージン崩壊
要素の上マージンと下マージンは、2 つのマージンのうち最大のものに等しい 1 つのマージンに折りたたまれることがあります。
これは、左右の余白では発生しません。上下余白のみ！
次の例を見てください。
上記の例では、<h1> 要素の下余白は 50px で、<h2> 要素の上余白は 20px に設定されています。
常識的には、<h1> と <h2> の間の垂直マージンは合計 70px (50px + 20px) になると思われます。しかし、マージンの崩壊により、実際のマージンは 50px になります。
すべての CSS マージン プロパティ
|
財産 |
説明 |
|---|---|
| マージン | 1 つの宣言ですべてのマージン プロパティを設定するための簡略プロパティ |
| マージンボトム | 要素の下マージンを設定します |
| 左マージン | 要素の左マージンを設定します |
| 右マージン | 要素の右マージンを設定します |
| マージントップ | 要素の上マージンを設定します |
プログラミング学習を加速させる
プログラミングをプロの講師に教えてもらいませんか。