[CS]利益合併

CSSを使用すると、UIが意外に実装されることがあります.これまで、最大の原因は、各ブラウザがデフォルトスタイル(reset cssで解決できる)に設定されたり、利益をマージしたりしたことです.

「連結投資利益」(Margin Collapsing)とは?

隣接するブロック要素の上下限値をより大きな下限にマージ

↑両方の箱に30 pxのマージン値が与えられており、2ブロックの間には60 pxがあるはずですが、実際には30 pxが合併する現象しか見られません.

↑より高い利益値を持っている.2番目のボックスのエッジにマージします.これを利益合併現象と呼ぶ.
似たような原理で、親の間に視覚的な要素の透明な状態がない場合、親と子供の関係の中で、2人の中で最大の利益値が子供の利益値になる.次の例から、親のmarging-top値が相殺されていることがわかります.

🔧 利益合併の問題を解決する方法

塗りつぶしまたは枠線期間

親要素
-欠点:設計時に1 pxの誤差が発生する

padding: 1px;
/* 또는 */
border: 1px solid transparent;

空のテーブルラベル

<div class="parent">
	<table></table>
	<div class="child"></div>
</div>
`

を挿入します.

サブエレメントの表示属性値をinline-blockに置き換えます
-2つのブロック要素が隣接する場合の利益連結を除去する条件

.

   .child {
   		display: inline-block}
        

親要素のオーバーフロー属性値

を指定します.

    .parent {
    	overflow: hidden}