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

互联网 18-8-9
这篇文章给大家介绍的内容是关于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中video标签的用法：如何自动填充满父div标签

HTML5属性：margin属性的用法实例

以上就是HTML5如何解决margin-top的塌陷问题（附代码）的详细内容，更多内容请关注技术你好其它相关文章！

来源链接：
免责声明：
1.资讯内容不构成投资建议，投资者应独立决策并自行承担风险
2.本文版权归属原作所有，仅代表作者本人观点，不代表本站的观点或立场
标签： Html5
上一篇：php获取远程图片并下载保存到本地的方法分析 下一篇：Html5中video标签的用法：如何自动填充满父div标签

相关资讯