HTML div ブロックを使用する場合、ブロックの中央がしっかりと接続できない場合は、何もできません。
1. <head></head> の中央のコンテンツに追加できます。
* {
マージン:0;
パディング:0;
}
すべてのブロック間の間隔をゼロにしても、以下のパディングマージンと競合しません。
2. 上位 div と下位 div の間にギャップの問題がある
4つのdivを上下に間隔をあけて書きました。コードと効果は次のとおりです。
.div1{
高さ:100ピクセル;
背景色:青;
位置:相対;
}
.div2 {
高さ:100ピクセル;
背景色:青紫;
位置:相対;
}
.div3{
高さ:100ピクセル;
背景色:赤;
位置:相対;
}
.div4{
高さ:100ピクセル;
背景色:黄色;
位置:相対;
}
<本文>
<div class="div1" ></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
</body>
次に、各 div に margin:0 を追加して、div 間のスペースを削除しようとしました。コードは次のとおりです。
.div1{
高さ:100ピクセル;
背景色:青;
位置:相対;
マージン: 0;
}
.div2 {
高さ:100ピクセル;
背景色:青紫;
位置:相対;
マージン: 0;
}
.div3{
高さ:100ピクセル;
背景色:赤;
位置:相対;
マージン: 0;
}
.div4{
高さ:100ピクセル;
背景色:黄色;
位置:相対;
マージン: 0;
}
結果は変わりませんが、以下に示すようにまだギャップがあります。
次に、Baidu を検索して、次のコードと効果に示すように、フォント サイズを設定する方法を見つけました。
本文{font-size:0;}
.div1{
高さ:100ピクセル;
背景色:青;
位置:相対;
}
.div2 {
高さ:100ピクセル;
背景色:青紫;
位置:相対;
}
.div3{
高さ:100ピクセル;
背景色:赤;
位置:相対;
}
.div4{
高さ:100ピクセル;
背景色:黄色;
位置:相対;
}
上記のコードは body{font-size:0;} の追加に重点を置いており、その効果は次のとおりです。
div の上部と下部の間の隙間は解消されていますが、上部と左側の間にはまだ隙間があることがわかります。
これは私がやったことです。body{margin:0px;}を追加します。コードは次のとおりです。
本文{マージン:0px;}
本文{font-size:0;}
.div1{
高さ:100ピクセル;
背景色:青;
位置:相対;
}
.div2 {
高さ:100ピクセル;
背景色:青紫;
位置:相対;
}
.div3{
高さ:100ピクセル;
背景色:赤;
位置:相対;
}
.div4{
高さ:100ピクセル;
背景色:黄色;
位置:相対;
}
効果は次のとおりです。
ご覧のとおり、隙間はすべて解消されています。
ただし、まだ問題があり、font-size:0; を設定するとすべてのフォントが消えてしまいます。
これが私がこの問題を解決した方法です: div 内に div を追加し、内部 div のフォント サイズをリセットします (例: font-size:30px;)。
完璧な解決策！
3. DIV+CSS クリア: どちらもフローティング後に div の上に隙間ができる問題をクリアします。
css float を使用すると css float が生成される場合があることがわかっています。このとき、これを実現するには、clear style 属性を使用します。
ただし、clear:both を使用して float をクリアすると、clear:both が適用される div の上に白いギャップが現れることがよくあります。
解決策は、この div の上の div に overflow:hidden; を追加することです。
<div class="a hid">
<div class="bms_2_1_1 fl">~海を越えてあなたに会いに行きます</div>
<div class="bms_2_1_2 fl"><img src="__STATIC__/images/male.png" width="18" height="18"/></div>
</div>
<div class="b cle hid">北京</div>
スタイルの説明:
.cle{クリア:両方;}
.hid{オーバーフロー:隠し;}
.fl{ float:left;}
.fr{ フロート:右;}
これは、最近のclear:bothによって引き起こされるdivギャップを解決する方法です。
なぜ div で clear:both を使用するのでしょうか?主な理由は、CSS で text-align:left; が設定されていても div b 内のテキストを左揃えにすることができないため、この場合は clear:both が使用されます。
いくつかの質問:
(1) div 内の中国語テキストの text-align:left; が無効なのはなぜですか?
(2) text-align:left が無効な場合に、clear:both を使用すると問題が解決するのはなぜですか?
(3) なぜ、clear:both を使用するとギャップが生じるのでしょうか?
(4) 上記の同じレベルの div で overflow:hidden; を使用すると、以下のギャップの問題が解決されるのはなぜですか?
将来機会があれば、上記の問題について詳しく勉強しましょう。
要約:
div が clear:both を使用してギャップを作成する場合、その上の兄弟 div に overflow:hidden; を追加してギャップを解消する必要があります。