html中margin-top整体下移问题,HTML5如何解决margin-top的塌陷问题（附代码）

这篇文章给大家介绍的内容是关于HTML5如何解决margin-top的塌陷问题(附代码)，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

Document

.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;

}

运行效果如下：

相关推荐：