1. マージン崩壊、通称マージン崩壊。
ボックス内に 2 つのボックスがネストされているとします (box1、box2 として記録されます)。 box1 の margin-top は、予想どおりボックスの上部のマージンを拡張しませんが、ボックスを含むコンテナーの上部の境界に基づいてマージンを拡張します。
解決策: 1. box1 padding-top を設定します。
2. ボックスの表示:absolute.を設定します。
3. ボックスのオーバーフロー: 非表示を設定します。図 2 に示すように:
この問題のコードは次のとおりです。この問題は、次の点が原因で発生します。ボックスが中央に配置されます。SPAN を Inline-Block に設定しない場合、SPAN が自動的に開きます。SPAN が inline-black に設定されている場合、その幅と高さの設定はテキストの位置に影響しません。
解決策は次のとおりです: 1. 親要素にpadding-topを設定します。元父 2、親の要素は設定されたままで、SPAN は内側の一括ボックスを設定せず、内側の距離は必要な幅を開くように設定されます。
効果は次のとおりです:
。