The outer distance combination means that when the two vertical margins meet, they will form an outer margin.
The height of the outer margin after the merger is equal to the larger of the two outer sides of the combined distance.
There will be no merger in horizontal direction.
The outer margin merge occurs only in the vertical margin of block boxes in normal document flows. The outer margin between inner frame, floating box or absolute location will not be merged.
situation 1
When one element appears above another, the lower outer margin of the first element merges with the upper outer margin of the second element.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin: 0px;
padding: 0px;
}
div{
border: 1px solid black;
}
.div1{
margin-bottom: 20px;
}
.div2{
margin-top: 10px;
}
</style>
</head>
<body>
<div class="div1">divtest1</div>
<div class="div2">divtest2</div>
</body>
</html>
situation 2
When an element is contained in another element (assuming no inner margin or frame separates the outer margin), the upper and / or lower outer margins merge.
The merged outer margin is added to the parent element.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin: 0px;
padding: 0px;
}
.div1{
margin-top: 20px;
background: blue;
}
.div2{
margin: 10px;
background: green;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2">test</div>
</div>
</body>
</html>
situation 3
The outer distance can also merge with itself.
Assuming that there is an empty element, it has an outer margin, but no borders or padding. In this case, the upper and outer margins will come together with the lower outer margins, and they will merge.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin: 0px;
padding: 0px;
}
.div1{
margin-top: 20px;
margin-bottom: 10px;
background: blue;
}
.div2{
background: red;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2">div2</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin: 0px;
padding: 0px;
}
div{
border: 1px solid black;
}
.div1{
margin-bottom: 20px;
}
.div2{
margin-top: 10px;
float: left;
width: 100%;
}
</style>
</head>
<body>
<div class="div1">divtest1</div>
<div class="div2">divtest2</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0px;
padding: 0px;
}
.div1 {
width: 200px;
height: 200px;
margin-top: 30px;
background: blue;
}
.div2 {
width: 100px;
height: 100px;
margin-top: 20px;
background: green;
float: left;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2">test</div>
</div>
</body>
</html>
Method 2: use absolute positioning.
The above float:left is changed intoposition: absoluteThe same effect
Method 3: use inlineblock
The above float:left is changed to display: inline-block.The same effect