利益合併

📔 連結利益

1.なぜ麻疹が合併するのか

2.回避方法

3.解決方法

[実マージン値付与時の結果]

各部分の間にきれいな間隔を持たせるために、ピッチ値20 pxを与えた.快適な間隔で隔てられているのが見えます.

🚨 しかしここでは「がきれい~」とだけは言えない.Em>「見た目はいいけど、ちょっとおかしい?」はこのような考えがあるはずです.marginの値が20 pxの場合、各断面間の上下ピッチは40 pxであるべきである.しかし、コード結果が示すように、20 pxの間隔だけが非常にきれいです.

[我々の予想結果(実際の結果X)]

marginのプロパティは、上図のようにsection間の長さは40 pxであるべきではないでしょうか.上20 px+下20 px.

🚨 しかし、CSSは、私たちが予想したように、上下に隣接するBlock要素のmarginを処理するわけではありません.

1.なぜ麻疹合併が起こったのか。

なぜ私たちの予想通りに処理しないのか、上記のようにCSSではmarginの一部が消失する現象が発生するのでしょうか.

原因は簡単です.上の結果と下の予想図を表示します.

それに比べて、どの結果が便利に見えますか?もっと安定しているように見えますか?marginの値を削除し、20 pxのみをフローティングし、ブロック間の間隔が一定の最初の結果をより容易に表示します.

CSSは、ドキュメントをより安定して表示しやすくするために意図的に設計されており、そのマージン値が重複している.これは私たちを不快にさせるためではなく、私たちを助けるために設計されています.(CSSは計画がありますよね・・・😉 )

...麻疹合併の条件が現れる。

1.隣接するBlock要素間

2.上下連結

1.隣接するBlock要素間

• 行の要因の間に利益合併は発生しません.
• block要素の間だけ!

2.上下連結

• 頃には麻疹合併は発生しなかった.
• は上下の間だけ!

連結利益が発生する条件を見て、以下はどのように避けますか!避ける方法は簡単です.上記の条件を満たさないように設計すればよい.

2.避ける方法

上記のように、私たちを助けるために誕生した利益合併!

私たちにも困難をもたらします.

以下に、解決すべき連結利益現象の例を示します.