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

Various front-end printing methods of web: CSS controls web page printing style

CSS controls the printing style of web pages : Use...

An article to quickly understand Angular and Ionic life cycle and hook functions

Table of contents Angular accomplish Calling orde...

Detailed example of remotely connecting to Docker using TLS encrypted communication

By default, Docker runs over a non-networked UNIX...

Detailed explanation of nginx proxy_cache cache configuration

Preface: Due to my work, I am involved in the fie...

Linux steps to configure local yum source, configure domestic yum source, and configure epel source

1. Configure local yum source 1. Mount the ISO im...

Get a list of your top 10 most frequently used terminal commands in Linux

I think the commands I use most often are: Choice...

Six ways to increase your website speed

1. Replace your .js library file address with the...

Solve the splicing problem of deleting conditions in myBatis

I just learned mybatis today and did some simple ...

Solution to the error when calling yum in docker container

When executing yum in dockerfile or in the contai...

Examples of importing and exporting MySQL table data

This article describes the import and export oper...

A quick solution to the problem that there is no data directory and my-default.ini in the unzipped package of Windows 64-bit MySQL 5.7 or above, and the service cannot be started (problem summary)

I am a beginner in SQL and thought that the insta...

How to use Docker to package and deploy images locally

First time using docker to package and deploy ima...

How to use Webstorm and Chrome to debug Vue projects

Table of contents Preface 1. Create a new Vue pro...

Deep understanding of line-height and vertical-align

Several concepts Line box: A box that wraps an in...

About Tomcat combined with Atomikos to implement JTA

Recently, the project switched the environment an...