CSS2 ボックス モデルは、隣接する垂直マージンが崩れることを示しています。
これは多くの設(shè)計(jì)エラーの原因となるため、これは面倒だと思います。マージン縮小の目的を理解することで、マージンをいつ使用するか、不要な場(chǎng)合にマージンを回避する方法を理解できるようになることを願(yuàn)っています。
この機(jī)能の目的は何ですか?
「マージン」の一般的な意味は、「10 ピクセル移動(dòng)する」ということではなく、「この要素の隣に 10 ピクセルの空白がなければなりません」ということです。
これは段落で概念化するのが最も簡(jiǎn)単だといつも感じています。段落に対してのみ
margin-top: 10px を指定し、他の要素にはマージンを指定しない場(chǎng)合、一連の段落は美しく配置されます。ただし、段落の下に別の要素を配置すると、當(dāng)然ながら問(wèn)題が発生します。二人は觸れ合うことになる。
margin-bottom: 10px を追加することを躊躇するでしょう。その場(chǎng)合、段落のペアは 20 ピクセル離れてしまい、段落同士が分離されてしまうからです。他の要素はわずか 10px です。