何だよ、利益はどこへ行ったのか:利益が重なる現象


マージン(margin)はcssプロパティで、要素の外部の4つの方向の空白領域を設定します.reset.cssがない場合に複数のブロック要素に余白を付けると、上下隣接要素間の余白が意外に減少する現象が発生します.この現象を境界重畳現象と呼ぶ.利益相殺は、利益合併とも呼ばれる.
ソリューションショートカット

エッジオーバーラップ(エッジ折りたたみ)


利益重複現象の典型的な例は以下の通りである.

1.兄弟要素間の上下の境界が重なる




上記のコードでは、sectionタグはそれぞれmargin: 20pxの属性をスケーリングし、上下左右に余白を付与している.

この場合、第1節のベースピッチと第2節のトップピッチが適切である場合、2節間の間隔は40 pxであるべきである.しかし、2つのセグメント間の間隔は20 pxである.

この場合の利益重複現象は、一貫した設計を作成するのに役立ちます.


2.親子間の利益が重なる