「CSS」マージン折りたたみ

マージン結合は組版に大きな利便性をもたらしますが、人々はマージン結合についてあまり知らないため、マージンを使用する際に多くの問題が発生します。 今日はマージン結合についてまとめた記事を書きました。

3 つの基本的なマージン結合

上下のマージンのみがマージン結合をトリガーし、左右のマージンはトリガーされません。証拠金結合は、次の 3 つの基本的な証拠金結合に基づいています。

1. 隣接する兄弟要素

2 つの連続する div を考慮し、その上下左右の余白は 50 ピクセルです。このとき、1番目の領域の下余白と2番目の領域の上余白が結合されるので、両者の距離は50pxになります。

<style>    .margin-box {        width: 50px;        height: 50px;        margin: 50px;        background: #fae900;    }</style><div class="margin-box"></div><div class="margin-box"></div>

2. 親要素と子要素

• 最初の子要素の上マージンと親要素の上マージンが結合されます

• 最後の子要素と親要素の下マージン要素の下の余白はマージされます

マージの視覚効果は、これらのマージンが親要素 のマージンとして表示されることです。

色付きの領域を使用して、別の色の別の領域を含めます。内側の領域のすべてのマージンは 50px に設定されます。

<div style="background: #cccdd1;">    <div class="margin-box"></div></div>

margin-boxの左右とも #cccdd1 で表示されており、上下のマージンが親要素とマージされて親要素のマージンとして表現されていることがわかります。親要素の親要素の背景色 (マージが再度発生する場合は、再帰するだけです)。

注意深く読んでいる人は、親要素のマージンを設定していないことがわかると思いますが、どうすれば親要素をマージできるでしょうか?

マージンが0の場合もマージが発生するためです。

3. 空の要素

自体の上下のマージンがマージされます。 °(°?Д?°) °

マージンが結合しないようにします

2 番目のケースは結合しません

オーバーフローを設定します: 非表示 (非表示)。

マージンをマージするには直接接触する必要があるため、ボックス モデルに従って、親要素の

ボーダー または パディング を設定するか、いくつかの要素を使用して最初の要素を親要素 (つまり、は最初の要素ではありません)。

3 つの状況すべてでマージはありません

静的フローを持つ要素のみマージンがマージされるため、float,position:Absolute; を設定すると、どのような状況でもマージンがマージされなくなります。

inline-block は例外で、ドキュメント フローから切り離されませんが、その余白はすべてマージされません。

デモ

技術記事とデモは一緒にすると良いと聞きました〜

git clone https://github.com/JasonKid/fezone.git 検索マージン崩壊

いいねを忘れずに... (??□ ）┴─┴