マージンのBUG(2)_html/css_WEB-ITnose

前回の考察の続きですが、今回は隣り合う2つのdivボックスに同時にmarginを設定すると、その間の隙間が正常に表示されなくなるというバグを発見しました

具体的な式は以下の通りです。まず、2 つの div1 と div2 を作成します

<div class="div1"></div><div class="div2"></div>

div2 を margin-top に設定し、div1 を margin-bottom に設定します。 コードは次のとおりです:

.div1{    width: 200px;height: 200px;    background: green;    margin-bottom: 50px;  }  .div2{    width: 200px;height: 200px;    background: blue;    margin-top: 80px;  }

比較と観察を容易にするために、背景色と幅と高さを設定します

この場合、2 つの間のギャップは margin-top と margin-bottom の間で比較された最大値になります

どうしてもギャップを追加したい場合は、div2 要素を inline-block に変更する必要があります。コードは次のとおりです。

.div2{    width: 200px;height: 200px;    background: blue;    margin-top: 80px;    display:inline-block;  }

div2をインラインブロック属性に変換すると、両者の間のギャップが正常に追加され、正しく表示されるようになります。