The phenomenon of margin-top collapse and the specific solution
|
What is margin-top collapse Margin-top collapse is a phenomenon that occurs in the CSS box model. It describes that when a parent element wraps a child element, when the margin-top property is set for the child element, at this time, you just want the border of the child element to be a certain distance away from the border of the parent element, but the top of the parent element is displaced from the border of the body. This is the phenomenon of margin-top collapse. When the margin-top attribute is not added to the child element (green part), the web page looks like the following:
However, when the margin-top attribute is added to the child element, the web page display becomes as shown below:
You will find that the distance between the border of the child element and the border of the parent element (yellow part) has not increased. Instead, the distance between the upper border of the parent element and the upper border of the browser has increased. That is, the parent element moves down a certain distance with the child element. After inspection, this distance is exactly equal to the margin-top attribute value we set for the child element. This is the phenomenon of margin-top collapse. How to solve margin-top collapse The margin-top collapse problem can be solved from the following points, which have been proven to be effective: 1. Add a border to the parent element In order not to affect the original image effect, you can set the border color to white (consistent with the browser background color) 2. Overflow hiding Add overflow:hidden to the style of the parent element; 3. Use Float Add float to the parent element's style, but this method is not recommended. Because it will cause unknown errors 4. Add position:fixed to the parent element; The knowledge of positioning is used here to display the parent element in a fixed position so that it will not be affected by the problem of margin-top collapse. 5. Set display: table to the parent element; 6. Use pseudo-elements Pseudo-elements are called pseudo-elements because they are not real page elements and HTML has no corresponding elements, but their usage and performance behaviors are the same as real elements, so they are called pseudo-elements.
.clearfix::before{
content: ";
display: table;
}
.clearfix is another class name added to the parent element. This is the recommended solution that can solve the margin-top collapse problem without causing other additional unknown errors. Now that the solution has been determined, let’s take a look at the final result, as shown below:
As you can see, the current position of the child element is moving relative to the parent element, and it will not affect the position of the parent element. The debugging code is attached below:
<!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>10-margin-top collapse</title>
<style>
.clearfix::before{
content: '';
display: table;
}
.box{
width: 200px;
height: 200px;
background-color: gold;
margin:0px auto;
}
.con{
width: 100px;
height: 50px;
background-color: green;
margin-top: 100px;
}
</style>
</head>
<body>
<div class="box clearfix">
<div class="con"></div>
</div>
</body>
</html>The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM. |
<<: Problem with resizing tables using relative widths
>>: WeChat applet development form validation WxValidate usage
Recommend
Several practical scenarios for implementing the replace function in MySQL
REPLACE Syntax REPLACE(String,from_str,to_str) Th...
MySQL uses UNIQUE to implement non-duplicate data insertion
SQL UNIQUE constraint The UNIQUE constraint uniqu...
CSS3 category menu effect
The CSS3 category menu effects are as follows: HT...
JavaScript+html implements random QR code verification on front-end pages
Share the cool front-end page random QR code veri...
Detailed explanation of the process of configuring multiple SVN repositories on Linux servers
1. Create a repository in the specified directory...
Detailed explanation of docker compose usage
Table of contents Docker Compose usage scenarios ...
Detailed explanation of docker network bidirectional connection
View Docker Network docker network ls [root@maste...
Teach you step by step to configure MySQL remote access
Preface When using the MySQL database, sometimes ...
The final solution to Chrome's minimum font size limit of 12px
I believe that many users who make websites will ...
Share 13 basic syntax of Typescript
Table of contents 1. What is Ts 2. Basic Grammar ...
A detailed guide to custom directives in Vue
Table of contents 1. What is a custom instruction...
CSS3 uses transform to create a moving 2D clock
Now that we have finished the transform course, l...
URL representation in HTML web pages
In HTML, common URLs are represented in a variety ...
How to make vue long list load quickly
Table of contents background Main content 1. Comp...
Detailed explanation of using javascript to handle common events
Table of contents 1. Form events 2. Mouse events ...