div間のギャップの解決策

HTMLのdivブロックを使用していて、ブロックの中央をしっかりと接続できず、解決できない場合

1. 中間コンテンツに<head></head>を追加できます

* {
マージン:0;
パディング:0;
}

下のパディングマージンと競合することなく、すべてのブロック間の間隔をゼロにします

2. 上部と下部のdivの間隔に問題がある

4 つの div を上下に分散し、その間に間隔を空けて記述しました。コードと効果は次のとおりです。

.div1{
高さ:100px;
背景色:青;
位置:相対;
}
.div2 {
高さ:100px;
背景色:青紫;
位置:相対;
}
.div3{
高さ:100px;
背景色:赤;
位置:相対;
}
.div4{
高さ:100px;
背景色:黄色;
位置:相対;
}
<本文>
<div class="div1" ></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
</本文>

次に、div 間のスペースを削除するために、各 div に margin:0 を追加してみました。コードは次のとおりです。

.div1{
高さ:100px;
背景色:青;
位置:相対;
マージン: 0;
}
.div2 {
高さ:100px;
背景色:青紫;
位置:相対;
マージン: 0;
}
.div3{
高さ:100px;
背景色:赤;
位置:相対;
マージン: 0;
}
.div4{
高さ:100px;
背景色:黄色;
位置:相対;
マージン: 0;
}

結果は同じままで、以下に示すようにまだギャップがあります。

次に、Baidu で検索して、フォントサイズを設定する方法を見つけました。コードと効果は次のとおりです。

本文{フォントサイズ:0;}
.div1{
高さ:100px;
背景色:青;
位置:相対;
}
.div2 {
高さ:100px;
背景色:青紫;
位置:相対;
}
.div3{
高さ:100px;
背景色:赤;
位置:相対;
}
.div4{
高さ:100px;
背景色:黄色;
位置:相対;
}

上記のコードは body{font-size:0;} の追加に重点を置いており、その効果は次のようになります。

div の上部と下部の間の隙間がなくなったことがわかります。ただし、上部と左側にはまだ隙間があります。

このため、body{margin:0px;} を追加して、コードは次のようになりました。

本文{マージン:0px;}
本文{フォントサイズ:0;}
.div1{
高さ:100px;
背景色:青;
位置:相対;
}
.div2 {
高さ:100px;
背景色:青紫;
位置:相対;
}
.div3{
高さ:100px;
背景色:赤;
位置:相対;
}
.div4{
高さ:100px;
背景色:黄色;
位置:相対;
}

効果は以下のとおりです。

ご覧のとおり、すべてのスペースが削除されました。

ただし、まだ問題が残っています。つまり、font-size:0; を設定すると、すべてのフォントが消えてしまいます。

私がこれを解決した方法は次のとおりです。div 内に div を追加し、内側の div のフォントサイズをリセットします (例: font-size: 30px;)。

完璧な解決策です!

3. DIV+CSS clear:bothでフローティングをクリアすると、divの上に隙間ができます。

CSS フロートを使用すると、CSS フロートが生成される場合があることはわかっています。このとき、フロートをクリーンアップする必要があります。これを実現するには、clear スタイル属性を使用できます。

ただし、clear:both を使用して結果のフロートをクリアすると、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{オーバーフロー:hidden;}
.fl{ フロート:左;}
.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 で問題を解決できるのはなぜですか?
（３）clear:bothを使用するとなぜギャップが生じるのでしょうか？
(4) 上の同じレベルの div で overflow:hidden; を使用すると、下のギャップの問題が解決するのはなぜですか?

今後、上記の問題について詳細に研究する機会があるでしょう。

要約:

clear:both を div に適用してギャップを作成する場合、ギャップを解消するには、その上の同じレベルの div に overflow:hidden; を追加する必要があります。

<<:

>>: HTML テーブルの空白セル補完を実装する方法