ホームページ >ウェブフロントエンド >htmlチュートリアル >問題点と対策：CSSマージンcollapse_html/css_WEB-ITnose
問題点と対策：CSSマージンcollapse_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:59:131438ブラウズ
1: c6bfa162583e905290443f6b02574535
2: <html>
3: <head>
4: <title></title>
5: <metaname=""content="">
6: <style>
7: *{ 8: margin:0px;
9: padding:0px;
10: }リー、リー、リー、リー、リー、リー、リー、リー
11:
12: #no1{ 13: background:#808000;
14: width:300px;
15: height:300px;
16: margin:100px 0 0 100px;
17: }
18:
19: #no2{ 20: background:#c0c0c0;
21: width:150px;
22: height:150px;
23: margin-left:20px;
24: margin-top:30px;
25: }
26: </style>
次のようにあるべきだと思うなら:
それは間違いです。結果は次のようになります:
CSS にはマージン崩壊、つまり境界崩壊または境界オーバーラップがあるためです。 2 つの div ブロックが並置されている場合、上の div の margin-bottom と下の div の margin-top が潰れてしまいます。つまり、上下のマージンの最大値が表示値となりますので、その意味では: CSS とブラウザのデザイナーは、レイアウト中に 2 つのコンテンツ ブロックが並んで配置される場合、各ブロックの余白の上または下に 1 つの場所のみを設定することが最善であることを望んでいます。 w3school では次のことも規定しています: 2 つの垂直マージンが交わるとき、それらはマージンを形成します。マージされたマージンの高さは、マージされた 2 つのマージンの高さの大きい方に等しくなります。
ただし、親ブロック DIV に子ブロック DIV が含まれる場合については、別の CSS 規約に従って説明します。つまり、次のようになります。 要素がブロックレベルの子要素を持つ場合、要素の高さを計算する方法垂直境界線とパディングがない場合、その高さは子要素 の上端と下端の間の距離になります。コードは次のとおりです:
27: </head>
father この div には、div を開くことができるコンテンツがないため、高さは 0 です。
28:
に変化した場合、現時点ではテキストが DIV をサポートしているため、高さはテキストの高さになります。
そうは言っても、DIV とそのサブ DIV は、垂直方向の境界線または詰め物に特に注意を払います。これは、内側に洗面器を保持できるかどうかは、主に蓋、垂直方向の境界線、または詰め物に依存します。 . それがこの「鍋蓋」です。したがって、少なくとも 3 つの解決策があります:
1. 親 div の境界線を設定する必要があります。もちろん、境界線を透明に設定することもできます:
29: <body>
30:
31: <div id="no1">
2.親 DIV にパディングを追加するか、少なくとも padding-top;
32: <div id="no2">Span2</div>
33: </div>
34:
3. 親 DIV に overflow:hidden を追加します
35: </body>
出典: http: //www.ido321.com/387 .html