ホームページ  >  記事  >  ウェブフロントエンド  >  マージンのBUG(2)_html/css_WEB-ITnose

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

WBOY
WBOYオリジナル
2016-06-24 11:15:03945ブラウズ

前回の考察の続きですが、今回は隣り合う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をインラインブロック属性に変換すると、両者の間のギャップが正常に追加され、正しく表示されるようになります。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。