HTML5如何解决margin-top的塌陷问题（附代码）

百变鹏仔 3个月前 (10-18) #H5教程

文章标签如何解决

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

<!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>

运行效果如下：

文章推荐

HTML5如何解决margin-top的塌陷问题（附代码）

HTML在线编辑器的调用方法和使用方法

AlloyTouch全屏滚动插件 30秒搞定顺滑H5页

HTML5 js实现拖拉上传文件功能

Canvas and Drawables 翻译第一集

Canvas and Drawables 翻译第三集