DIV_html/css_WEB-IT余白崩れの親子関係の鼻

時間をかけて知識を整理するつもりですが、普段はその場で確認するだけで仕事を終えることができますが、面接などに遭遇した場合、その場で確認するのでは遅すぎます。 。 。

マージンについて、いくつかの知識ポイントを以下にまとめます。

1: 親子関係の DIV タグとマージンなしのスタイル

次に、親とサブセットの両方にマージンを追加します

実際の効果は次のとおりです:

これはいわゆる marginCollapse (境界線の重なり) であることがわかります。両者の値を計算して表示するというもので、以前 CSS を書いていたときによく見かけましたが、こんな立派な名前があるとは知りませんでした。 。 。恥ずかしい。

仕上げの解決策は次のとおりです:

1. 親 div にボーダーを追加します。

2. 親 div にオーバーフローを追加します。

3. 親 div にパディングを追加します。 4. 親または子divにfloatを追加します ；

5. 親と子divにdisplay: inline-blockを追加します

6. 子divにdisplay: inline-blockを追加します

漏れがあれば、お気軽に追加してください。