[解決済み] CSSで余白をつぶす意味とは？

質問

CSS2 のボックスモデルでは 隣接する垂直方向の余白が崩れる .

私は、多くのデザインバグの原因となっている、かなり厄介なものだと感じています。余白の折りたたみの目的を理解することで、いつ使うべきか、必要ないときはどう避けるべきかを理解できればと思います。

この機能の目的は何ですか？

どのように解決するのですか？

margin"の一般的な意味は、「これを10pxずらす」ということではなく、「この要素の横には10pxの空白が必要です」ということです。

私はいつも、これは段落で概念化するのが最も簡単であると感じています。

もしあなたが段落に margin-top: 10px を与え、他の要素にマージンを取らなかった場合、一連の段落は美しく間隔を空けることができます。しかしもちろん、段落の下に別の要素を配置するときには問題が発生します。この 2 つは接触してしまうのです。

余白が崩れないとなると、迷わず margin-bottom: 10px を追加することを躊躇するでしょう。なぜなら、その場合、段落のペアは 20px の間隔になり、段落は他の要素から 10px だけ離れてしまうからです。

つまり、垂直方向の余白が崩れてしまうのです。上下に 10px の余白を追加することで、「他の要素がどのような余白ルールを持っているかは気にしない。私は各段落の上下に少なくとも 10px のパディングを要求します。