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
How to install MySQL under Linux (yum and source code compilation)
Here are two ways to install MySQL under Linux: y...
Solve the problem that the VMWare virtual machine centos time is inconsistent with the local time
The time of VM Ware virtual machine centos is inc...
Ansible automated operation and maintenance deployment method for Linux system
Ansible is a new automated operation and maintena...
A brief analysis of the underlying principles of MySQL transactions and isolation levels
Table of contents Preface 1. Brief Analysis of th...
Overview of time configuration under Linux system
1. Time types are divided into: 1. Network time (...
Detailed explanation of Vue's calculated properties
1. What is a calculated attribute? In plain words...
Element sample code to implement dynamic table
Table of contents 【Code background】 【Code Impleme...
MySQL FAQ series: How to avoid a sudden increase in the size of the ibdata1 file
0. Introduction What is the ibdata1 file? ibdata1...
Detailed explanation of the frame and rules attributes of the table in HTML
The frame and rules attributes of the table tag c...
JavaScript to achieve magnifying glass effect
This article shares the specific code for JavaScr...
Two methods to stretch the background image of a web page
There are two solutions: One is CSS, using backgro...
Detailed explanation of the practice of installing the Permeate range system using VMware
1. Background We do some internal training from t...
Ten useful and simple MySQL functions
function 0. Display current time Command: select ...
What are the differences between var let const in JavaScript
Table of contents 1. Repeated declaration 1.1 var...
Detailed steps for Linux account file control management
In the Linux system, in addition to various accou...