This article introduces to you how HTML5 solves the margin-top collapse problem (with code). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.
<!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>
.box{
width: 400px;
height: 400px;
background-color: red;
/* 解决margin-top塌陷问题 */
/* 1.设置border padding */
/* border: 1px solid green; */
/* padding: 1px; */
/* 2.设置overflow */
overflow: hidden;
}
/* 3.通过伪类
实际开发使用
*/
.clearfix:before{
content: "";
display: table;
}
.box1{
width: 100px;
height: 100px;
background-color: green;
margin-top: 50px;
}
</style>
</head>
<body>
<p class="box clearfix">
<p class="box1"></p>
</p>
</body>
</html>The running effect is as follows:
Related recommendations:
Usage of video tag in Html5: How to automatically Fill in the parent div tag
HTML5 attribute: Usage example of margin attribute
The above is the detailed content of How to solve the margin-top collapse problem in HTML5 (code attached). For more information, please follow other related articles on the PHP Chinese website!
What are the production methods of html5 animation production?
The difference between HTML and HTML5
How to implement color fonts in css
disk recovery data
How to enable secondary logon service
How to implement instant messaging on the front end
JS array sorting: sort() method
The speed difference between usb2.0 and 3.0
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
