search

Home >Web Front-end >H5 Tutorial >How to solve the margin-top collapse problem in HTML5 (code attached)

How to solve the margin-top collapse problem in HTML5 (code attached)

不言
不言Original
2018-08-09 15:46:393589browse

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:

How to solve the margin-top collapse problem in HTML5 (code attached)

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!

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Usage of video tag in Html5: How to automatically fill the parent div tagNext article：Usage of video tag in Html5: How to automatically fill the parent div tag

Related articles

See more