CSS のマージン縮小: その目的は何ですか?

Question

CSS2 ボックス モデルは、隣接する垂直マージンが崩れることを示しています。

これは多くの設計エラーの原因となるため、これは面倒だと思います。マージン縮小の目的を理解することで、マージンをいつ使用するか、不要な場合にマージンを回避する方法を理解できるようになることを願っています。

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

Answer 1

「マージン」の一般的な意味は、「10 ピクセル移動する」ということではなく、「この要素の隣に 10 ピクセルの空白がなければなりません」ということです。

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

段落に対してのみ

margin-top: 10px を指定し、他の要素にはマージンを指定しない場合、一連の段落は美しく配置されます。ただし、段落の下に別の要素を配置すると、当然ながら問題が発生します。二人は触れ合うことになる。

マージンが折りたたまれていない場合は、前のコードに

margin-bottom: 10px を追加することを躊躇するでしょう。その場合、段落のペアは 20 ピクセル離れてしまい、段落同士が分離されてしまうからです。他の要素はわずか 10px です。

そのため、垂直方向の余白が崩れてしまいます。上下のマージンを 10 ピクセル追加すると、「他の要素のマージン ルールは気にしません。各段落の上下に少なくとも 10 ピクセルのパディングが必要です。」と言っていることになります。