「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. 親要素と子要素

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

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

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

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

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

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

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

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