何だよ、利益はどこへ行ったのか:利益が重なる現象
ソリューションショートカット
エッジオーバーラップ(エッジ折りたたみ)
利益重複現象の典型的な例は以下の通りである.
1.兄弟要素間の上下の境界が重なる
上記のコードでは、sectionタグはそれぞれ
margin: 20px
の属性をスケーリングし、上下左右に余白を付与している.この場合、第1節のベースピッチと第2節のトップピッチが適切である場合、2節間の間隔は40 pxであるべきである.しかし、2つのセグメント間の間隔は20 pxである.
この場合の利益重複現象は、一貫した設計を作成するのに役立ちます.
2.親子間の利益が重なる
これは、最初のchildのmarging-top、最後のchildのmarging-bottomが適用されないためです.cssをチェックすると、親要素に余白が指定されていないが、子要素の余白値が親領域を超えていると判断できます.
마진 겹침 현상을 해결하는 법
この現象を解決する方法はいろいろあります.
1. 親要素にオーバーフローアトリビュートを適用
親要素overflow: hidden
のプロパティが与えられた場合、top、bottom marginが適用されます.
.parent {
overflow: hidden;
}
インターネットExplore互換性を考慮する必要がなければ、同様の原理で動作するdisplay: flow-root
属性を付与することができる.IEが終了した将来、これは役に立つかもしれません.
2. 親要素への表示:inline block
この方法を使用する場合は、親要素と同じ要素を横に並べて表示できることに注意してください.
.parent {
display: inline-block;
}
3. 親要素にborder値を適用
親要素にborder値を指定することで解決することもできます.(border: none
は解決できません)
.parent {
border: 1px solid black;
}
borderでなくても、親ラベルにpaddingを追加したり、自分の空間を占める要素を親、子、兄弟要素の間に挿入したりすることで解決できます.ただし、box-sizing: border
プロパティを使用しない場合、borderまたはpaddingは親要素の幅を変更する可能性があります.
4. 要素間にtableタグを追加
もう1つの解決策には、このようなものもあります.
<div class="parent">
<!--✅ 이 부분 주목-->
<table></table>
<!------------------>
<div class="child">
child 1
</div>
...
</div>
利益が重なる要因の間に空白の表ラベルを追加します.空のテーブルラベルはスペースを消費せず、レイアウトに影響しません.
しかし、これによりコンテンツのない無意味なラベルが追加されるため、cleanコードを追求する人はewを使用します.眉をひそめるだけで、この原理を適用して仮想要素として表すと、寸法を損なうことなく解決できます.
.parent::before,
.parent::after {
content: ' ';
display: table;
}
before、after仮想クラスセレクタとしてドキュメントの実際のテーブルに追加するのではなく、このような利益が重なる要素にテーブル仮想要素を追加すると、非常に幸せになります.
注意:
맺으며
ダメなとき「なによどうしてダメなの?」と思ったけど、上の簡単な方法で修正したら、「なに、どうしたの?」疑問が生じる.ブラウザはなぜ利益が重なるように設計されていますか?なぜ溢れ出す时に解决するの?これらの問題を記録して解決しようと努力してこそ、本当に鋭い開発者になることができる......明日はもっと水を潜って勉強します.
付加)display: flow-root
およびoverflow: ...
の属性が与えられた場合、解決される問題は、ブロックフォーマットコンテキスト(block format context)に関連することである.これは、親が新しいブロックフォーマットコンテキストを作成し、子供と利益の重複を回避することを意味します.
overflow: visible
以外のoverflow: hidden
、clip
などの属性を持つブロック要素は、利益の重複を生じない新しいブロックフォーマットコンテキストを生成する.
フォーマットブロックに関する情報は여기를 클릭.
『p>深い部分ですが、知っていれば幸せ感があるという束営宗燦さん.小麦粉を練る.floatプロパティを使用する場合に特に役立つそうです.
連結利益については、以下の資料からより詳細な説明を確認できます.強くお勧めします!
[ㅁ] 마진병합 margin collapsing | 코딩가나다 | 빔캠프
The Rules of Margin Collapse (EN)
Reference
この問題について(何だよ、利益はどこへ行ったのか:利益が重なる現象), 我々は、より多くの情報をここで見つけました https://velog.io/@devsaza/likealion006テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol