コーススケジュール
マージンの折りたたみとは、2 つの垂直マージンが交わると 1 つのマージンを形成することを意味します。
結合されたマージンの高さは、結合された 2 つのマージンの高さのうち大きい方と等しくなります。
合計マージン
マージン コラプシング (スタッキング) は非常に単純な概念です。 ただし、実際に Web ページをレイアウトする場合、多くの混乱が生じる可能性があります。
簡単に言うと、マージンの折りたたみとは、2 つの垂直マージンが交わると 1 つのマージンを形成することを意味します。 マージされたマージンの高さは、マージされた 2 つのマージンの高さの大きい方に等しくなります。
要素が別の要素の上に表示される場合、最初の要素の下マージンは 2 番目の要素の上マージンと結合します。 下の図をご覧ください:
要素が別の要素内に含まれている場合 (マージンを区切るパディングや境界線がないと仮定して)、それらの上マージンまたは下マージン、あるいはその両方もマージされます。 下の図をご覧ください:
奇妙に思われるかもしれませんが、マージンはマージン自体と結合することもあります。
余白のある空の要素があるとしますが、境界線やパディングはないとします。 この場合、上下の余白が接触し、結合されます。
このマージンが別の要素のマージンと接触すると、そのマージンも折りたたまれます。
一連の段落要素が占めるスペースが非常に少ないのは、すべての余白が結合されて小さな余白が形成されるためです。
マージンコラプスは最初は少し奇妙に見えるかもしれませんが、実際には理にかなっています。 いくつかの段落で構成される典型的なテキスト ページを例に考えてみましょう。 最初の段落の上のスペースは、段落の上マージンと同じです。 マージンが折りたたまれない場合、後続のすべての段落間のマージンは、隣接する上マージンと下マージンの合計になります。 これは、段落間にページの上部の 2 倍のスペースがあることを意味します。 マージンの崩れが発生した場合、段落間の上下のマージンがマージされ、距離がどこでも一定になるようにします。
注: 通常のドキュメント フローのブロック ボックスの垂直マージンのみでマージンが折りたたまれます。 インライン ボックス、フローティング ボックス間のマージン、または絶対位置はマージされません。
すべての CSS マージン プロパティ
| 属性 | 説明 |
|---|---|
| margin | 宣言内でマージン プロパティを設定するための短縮プロパティ。 |
| margin-bottom | は要素の下マージンを設定します。 |
| margin-left | は要素の左マージンを設定します。 |
| margin-right | は要素の右マージンを設定します。 |
| margin-top | は要素の上マージンを設定します。 |