div の外側マージンのオーバーラップの問題と解決策

この記事では、css に関する関連知識を提供します。主に、div マージンの重なりに関連する問題の解決方法を紹介します。マージンの重なりは、通常のフロー ドキュメントの上部と下部でのみ発生します。マージンの場合、ブロック要素のみマージンの重なりが発生します。インライン要素とインライン ブロック要素にはマージンの重なりの問題は発生しません。一緒に見てみましょう。皆様のお役に立てれば幸いです。

(学習ビデオ共有: css ビデオ チュートリアル、html ビデオ チュートリアル)

CSSマージンが重なる (マージンの縮小)

ブロックの上マージンと下マージン (margin-top) および下マージン (margin-bottom) が、次のサイズの 1 つのマージンにマージ (縮小) されることがあります。単一のマージンの最大値 (または、マージンが等しい場合はそのうちの 1 つだけ)。マージンの折りたたみと呼ばれる動作。

境界の重なりとは、2 つ以上のボックス (隣接または入れ子になっている可能性があります) の隣接する境界 (空ではないコンテンツ、パディング、境界線がない) が重なり合って 1 つの境界を形成することを意味します。

つまり、マージンの重なりとは、垂直方向に隣接する 2 つのブロックレベル要素を指し、上下のマージンが交わるとき、外側のマージンが重なり、重なり合うマージンはどちらか大きい方に等しくなります。

重複するマージン値の計算方法:

• 両方のマージン値が正の場合、2 つの最大値を取ります。

• 負の境界が発生した場合は、最大の正の境界から絶対値が最大の負の境界を減算します。

• 正の境界がない場合は、絶対値が最大の負の境界がゼロから減算されます。

1. マージンの重なりの問題が発生するのはどの要素ですか?

マージンの重なりは、通常のフロー ドキュメントでのみ発生します 上マージンと下マージン の間では、 ブロック要素 のみマージンが重なり、 インライン要素 と インライン ブロック要素 には問題は発生しません。マージンの重なり具合

#2. マージンの重なりはどのような状況で発生しますか?

最初の状況: 値隣接する兄弟要素の marin-bottom と margin-top の境界が重なる

境界が重なる場合、最大の境界範囲のみが選択されて残されるため、2 つの間のマージンはは 100px
この境界線の重なりの問題を解決する必要がある場合は、後者の要素に float を追加するか、兄弟要素の 1 つに div を配置して、border: 1px 単色白;

<div></div>
<div></div>
 
#box1{
     width: 200px;
     height: 200px;
     background: lemonchiffon;
     margin-bottom: 50px;
     margin-top: 50px;
 }
 #box2{
     width: 200px;
     height: 200px;
     background: lightcoral;
     margin-top:100px ;
     opacity: 0.3;
     float: left;   //加上float后，两者间距为150px
 }

# を設定する必要があります。 # #2 番目のケース: 親要素と最初/最後の子要素のマージンをマージする#

<div>
   <div></div>
</div>
#box1{
     width: 200px;
     height: 200px;
     background: lemonchiffon;
     margin-top: 50px;
 }
 #box3 {
   width: 100px;
   height: 100px;
   background-color: #f12416;
   margin-top: 50px;
 }

この例の効果は次のとおりです:

#親要素と子要素の両方の margin-top が 50px に設定されている場合、親要素と子要素は子要素間の 50 ピクセルの距離ではなく、両方とも境界線から 50 ピクセル離れています。私たちが考える要素と親要素。

親要素が上マージンを設定せず、子要素が margin-top を 50 ピクセルに設定した場合、親要素と子要素の間の距離は上から 50 ピクセルのままです。

解決策:

方法 1: 親要素にオーバーフロー: 非表示を追加する;

この方法はマージンの重なりの問題を解決しますが、この方法は適用されるだけですto " 子要素の高さとマージンの高さが親要素の高さより小さい (childHeight margin-top、そうでない場合、子要素のコンテンツの一部が非表示になります

方法 2: 親要素の境界線に境界線を追加します (透明な境界線を追加できます)

##方法 3: 親または子に display:inline-block を設定します;

ブロック要素しかないのでマージンの重なりが発生するので、ブロック要素ではなくインラインブロック要素に設定します

方法4: float

## を親または子に設定します

#方法 5: 位置を設定します: 親または子の絶対値;

方法 6: パディングを追加します親要素

#

#box1{
     width: 200px;
     height: 200px;
     background: lemonchiffon;
     margin-top: 50px;
     /*overflow:hidden;*/
     /*border: 1px solid #00000000;*/
     /*display: inline-block;*/
     /*float:left;*/
     /*position: absolute*/
     /*padding: 10px;*/
 }
 #box3 {
        width: 100px;
        height: 100px;
        background-color: #f12416;
        margin-top: 50px;
        /*display: inline-block;*/
        /*float:left;*/
        /*position: absolute*/
    }

3 番目の状況: 空のブロックレベル要素

が独自の margin-top と margin- と重なっています。底。この問題は、border、padding、または height を設定することで解決できます。

  <div></div>
  <div></div>
  <div></div>
  <style>
 #box1{
      width: 200px; height:200px;
      background:lightseagreen;
      margin-bottom:50px ;
    } 
    #box2{
      margin-top: 20px;
      margin-bottom:20px ;
      border: 1px solid salmon; //加了border或padding后，与上下两个元素的间距分别为50px和100px,没加之前，上下两个元素的间距为100px
      /*padding: 1px; */
    }
    #box3{
      width: 200px; height:200px;
      background:darkgoldenrod;
      margin-top:100px ;
    }</style>

ボーダーまたはパディングを追加した後、上部要素と下部要素の間隔はそれぞれ 50px と 100px です。追加する前は、上部要素と下部要素の間隔は 100px

4 番目のケース: auto の高さを持つ親要素の margin-bottom が、子要素の margin-bottom と重なる

親要素は、それらを分離するために border-bottom と padding-bottom を設定します。または

にすることもできます

親要素の高さを設定し、max-height と min-height を使用することでもこの問題を解決できます

3. マージンの重なりを計算する方法

• すべてが正の値の場合は、最大値を取得します。

• #すべてが正の値の場合は、絶対値を取得し、正の値から最大値を減算します。

• 正の値がない場合は、絶対値を取得し、0 から最大値を減算します。

(学習ビデオ共有: css ビデオ チュートリアル、html ビデオ チュートリアル)

以上がdiv の外側マージンのオーバーラップの問題と解決策の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。