About CSS margin collapse, merge problems
Question 1: What is margin collapse
For block elements with two nested relationships (parent-child), where the parent element has an upper margin and the child element has an upper margin, the parent element collapses into a larger margin value.
The phenomenon of
code
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="Width = device - width, initial - scale = 1.0">
<title>Document</title>
<script type="text/javascript">
window.onload = function (){
console.log("Parent box nested, parent box collapsed.");
}
</script>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
.father {
height: 100px;
width: 100px;
background-color: red;
/* overflow: hidden; * /
}
.son {
height: 50px;
width: 50px;
background-color: blue;
margin: 25px 25px;
}
</style>
</head>
<body>
<! -- Parent box nested, child box set vertical margin at 25px, result parent box moved down 25px, showing parent box collapse phenomenon -->
<div class="father">
<div class="son">
</div>
</div>
</body>
</html>
Copy the codeinstructions
The vertical margin of the child box is set at 25px in the code, but the actual effect is that the parent box moves down 25px and the child box does not move. This phenomenon is called vertical margin collapse. You can think of this as a major BUG in CSS.
The solution
Method 1: Add a top border or set an inside margin to the parent box
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="Width = device - width, initial - scale = 1.0">
<title>Document</title>
<script type="text/javascript">
window.onload = function (){
console.log("Parent box nested, parent box collapsed.");
}
</script>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
.father {
height: 100px;
width: 100px;
background-color: red; <! -- New code added --> boder --top:1px solid red;
/* padding: 1px 1px; * /
}
.son {
height: 50px;
width: 50px;
background-color: blue;
margin: 25px 25px;
}
</style>
</head>
<body>
<! -- Parent box nested, child box set vertical margin at 25px, result parent box moved down 25px, showing parent box collapse phenomenon -->
<div class="father">
<div class="son">
</div>
</div>
</body>
</html>
Copy the code
Method 2: Trigger the BFC rule
BFC is a rule in CSS that affects box properties and makes them different from normal boxes. It just solves the vertical collapse problem of margin.
W3C interpretation of BFC: It determines how an element locates its content and how it relates and interacts with other elements. When it comes to visual layout, Block Formatting Context provides an environment in which HTML elements are laid out according to certain rules.
But just remember that the purpose of a BFC is to form a completely independent space where the child elements in the space do not affect the layout of the outside. The solutions are as follows
floatDon’t fornonepositionDon’t forrelativeandstaticoverflowforauto,scrollandhiddendisplayThe value oftable-cellorinline-block
Conclusion:
To solve the problem of vertical collapse of margin, it can be solved by setting the border of the parent box, but this solution is generally not used as a solution, because setting the boder value or setting the inner margin may change the box size, which is contrary to the design. We usually do this by triggering the BFC.
Q2: What is margin merge?
When two adjacent block elements (siblings) meet, if the upper element has a lower margin margin-bottom, the lower element does
Margin-top, then the vertical distance between them is not the sum of margin-bottom and margin-top. Take one of the two values
Larger cases of this phenomenon are calledMerging of vertical margins of adjacent block elements.
The phenomenon of
code
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="Width = device - width, initial - scale = 1.0">
<title>Document</title>
<script type="text/javascript">
window.onload = function () {
console.log("Margin merge problem");
}
</script>
<style type="text/css">
.brother {
height: 100px;
width: 100px;
background-color: red;
margin: 20px 20px;
}
.sister {
height: 100px;
width: 100px;
background-color: blue;
margin: 20px 20px;
}
</style>
</head>
<body>
<div class="brother"></div>
<div class="sister"></div>
</body>
</html>
Copy the codeinstructions
The margin value is set between the two adjacent boxes. In the code, the margin value is 20px. In theory, the box brother and box sister should be 40px apart, but in practice it is only 20px
The solution
Method 1: Set the margin value of only one box as the desired value
Box Brother has a vertical margin of 40px and box Sister has a vertical margin of 0
Method 2: Put them in a parent box and trigger the parent box’s BFC rule
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="Width = device - width, initial - scale = 1.0">
<title>Document</title>
<script type="text/javascript">
window.onload = function () {
console.log("Margin merge problem");
}
</script>
<style type="text/css">
.father {
overflow: hidden;
}
.brother {
height: 100px;
width: 100px;
background-color: red;
margin: 20px 20px;
}
.sister {
height: 100px;
width: 100px;
background-color: blue;
margin: 20px 20px;
}
</style>
</head>
<body>
<div class="father">
<div class="brother"></div>
</div>
<div class="father">
<div class="sister"></div>
</div>
</body>
</html>
Copy the code
Conclusion:
Adding a parent element is equivalent to modifying the entire HTML structure, which is best done with scheme one and should be used discreetly. This eliminates the need to modify the HTML structure