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

时间2024-01-23 15:31:27发布访客分类HTML浏览456

导读：收集整理的这篇文章主要介绍了HTML5如何解决margin-top的塌陷问题（附代码），觉得挺不错的，现在分享给大家，也给大家做个参考。这篇文章给大家介绍的内容是关于HTML5如何解决margin-top的塌陷问题（附代码），有一定的参考价...

收集整理的这篇文章主要介绍了HTML5如何解决margin-top的塌陷问题（附代码），觉得挺不错的，现在分享给大家，也给大家做个参考。这篇文章给大家介绍的内容是关于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>

运行效果如下：