Solution to the gap between divs

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

Recommend

Analysis of the usage of loop statements (WHILE, REPEAT and LOOP) in MySQL stored procedures

This article uses examples to illustrate the usag...

Detailed explanation of mysql basic operation statement commands

1. Connect to MySQL Format: mysql -h host address...

Detailed explanation of using top command to analyze Linux system performance

Introduction to Linux top command The top command...

MySQL 5.7.17 compressed package installation and configuration method graphic tutorial

There are few and inadequate installation tutoria...

How to upgrade https under Nginx

Purchase Certificate You can purchase it from Ali...

Shell script nginx automation script

This script can satisfy the operations of startin...

js to achieve simulated shopping mall case

Friends who are learning HTML, CSS and JS front-e...

Ubuntu Basic Tutorial: apt-get Command

Preface The apt-get command is a package manageme...

Let the web page redirect to other pages after opening for a few seconds

Just add the following code to achieve it. Method ...

CentOS 7.x deployment of master and slave DNS servers

1. Preparation Example: Two machines: 192.168.219...

Detailed example of mysql trigger usage

MySQL trigger syntax details: A trigger is a spec...

Vue conditional rendering v-if and v-show

Table of contents 1. v-if 2. Use v-if on <temp...

CSS achieves highly adaptive full screen

When writing my own demo, I want to use display:f...

A detailed introduction to wget command in Linux

Table of contents First install wget View Help Ma...

How to solve the mysql error 1033 Incorrect information in file: 'xxx.frm'

Problem Description 1. Database of the collection...