Solution to the gap between divs

When you use HTML div blocks and the middle of the blocks cannot be tightly connected and you can't solve it

1. You can add a <head></head> in the middle content

* {
margin:0;
padding:0;
}

Make the spacing between all blocks zero without conflicting with the padding margin below

2. There is a problem of spacing between the upper and lower divs

I wrote 4 divs, distributed up and down, with spacing between them. The code and effect are as follows:

.div1{
height:100px;
background-color:blue;
position:relative;
}
.div2 {
height:100px;
background-color:blueviolet;
position:relative;
}
.div3{
height:100px;
background-color:red;
position:relative;
}
.div4{
height:100px;
background-color:yellow;
position:relative;
}
<body>
<div class="div1" ></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
</body>

Then, I tried to add margin:0 to each div to remove the spacing between the divs. The code is as follows:

.div1{
height:100px;
background-color:blue;
position:relative;
margin: 0;
}
.div2 {
height:100px;
background-color:blueviolet;
position:relative;
margin: 0;
}
.div3{
height:100px;
background-color:red;
position:relative;
margin: 0;
}
.div4{
height:100px;
background-color:yellow;
position:relative;
margin: 0;
}

The result remains the same, and there is still a gap, as shown below:

Next I searched Baidu and found a method to set the font-size. The code and effect are as follows:

body{font-size:0;}
.div1{
height:100px;
background-color:blue;
position:relative;
}
.div2 {
height:100px;
background-color:blueviolet;
position:relative;
}
.div3{
height:100px;
background-color:red;
position:relative;
}
.div4{
height:100px;
background-color:yellow;
position:relative;
}

The above code focuses on adding body{font-size:0;}, and the effect is as follows:

You can see that the gap between the top and bottom of the div has been eliminated. However, there is still a gap at the top and left.

For this, I did this, adding body{margin:0px;}, the code is as follows:

body{margin:0px;}
body{font-size:0;}
.div1{
height:100px;
background-color:blue;
position:relative;
}
.div2 {
height:100px;
background-color:blueviolet;
position:relative;
}
.div3{
height:100px;
background-color:red;
position:relative;
}
.div4{
height:100px;
background-color:yellow;
position:relative;
}

The effect is as follows:

As you can see, all the spacing has been eliminated.

However, there is still a problem, that is, setting font-size:0; will cause all fonts to disappear.

This is how I solved it: add a div inside a div and reset the font size of the inner div, for example: font-size: 30px;.

Perfect solution!

3. After DIV+CSS clear:both clears the floating, there will be a gap above the div

We know that sometimes using CSS float will produce CSS float. At this time, we need to clean up the float. We can use the clear style attribute to achieve it.

However, after using clear:both to clear the resulting float, a white gap often appears above the div to which clear:both is applied.

The solution is to add overflow:hidden to the div above this div;

<div class="a hid">
<div class="bms_2_1_1 fl">~I crossed the ocean to see you,</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">Beijing</div>

Style Description:

.cle{clear:both;}
.hid{overflow:hidden;}
.fl{ float:left;}
.fr{ float:right;}

This is the solution to the div gap caused by clear:both in recent days.

Why use clear:both in div? This is mainly because the text in div b cannot be aligned to the left even if text-align:left is set in CSS, so clear:both is used in this case.

A few questions:
(1) Why is text-align:left; in a div invalid?
(2) Why can clear:both solve the problem when text-align:left; is ineffective?
(3) Why does using clear:both create gaps?
(4) Why does using overflow:hidden; in the div of the same level above solve the gap problem below?

I will have the opportunity to study the above issues in detail in the future.

Summarize:

When clear:both is applied to a div to create a gap, overflow:hidden; needs to be added to the div of the same level above it to eliminate the gap.

<<:

>>: How to implement HTML Table blank cell completion