垂直方向margin塌陷现象

最新推荐文章于 2023-06-15 11:25:22 发布

Nemo.1213

最新推荐文章于 2023-06-15 11:25:22 发布

阅读量177

点赞数

分类专栏：前端文章标签： css

本文链接：https://blog.csdn.net/weixin_45763491/article/details/107745747

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

现象描述：标准文档流中，父子、兄弟结构的盒子，竖直方向的margin不叠加，以较大的为准。

说明：

实际开发中，只需解决父子结构盒子的margin塌陷问题；兄弟盒子的margin重合问题，可通过把margin都加在同一个盒子上的方法避免。
父子结构的盒子，其实也只是第一个子盒子跟父盒子的margin会有塌陷问题，若后面还有其他子盒子，margin不叠加。

如果不在标准文档流中，比如两个盒子都浮动了，则不存在塌陷现象，上下margin可叠加。

例1：

<!DOCTYPE html>
<html>

<head>
    <title>垂直方向margin塌陷</title>
    <style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }

    .box1 {
        width: 200px;
        height: 200px;
        background-color: red;
        margin-left: 100px;
        margin-top: 100px;

    }

    .box2 {
        width: 100px;
        height: 100px;
        background-color: green;
        margin-top: 50px;

    }
    </style>
</head>

<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>

</html>

例1图：

例2：

<!DOCTYPE html>
<html>

<head>
    <title>垂直方向margin塌陷</title>
    <style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }

    .box1 {
        width: 200px;
        height: 200px;
        background-color: red;
        margin-left: 100px;
        margin-top: 50px;

    }

    .box2 {
        width: 100px;
        height: 100px;
        background-color: green;
        margin-top: 200px;

    }
    </style>
</head>

<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>

</html>

例2图：

解决办法

根据具体需求，用以下几种方法让父盒子脱离标准流：

position:absolute;

display:inline-block;

float:left/right;

overflow:hidden;

例3：

<!DOCTYPE html>
<html>

<head>
    <title>垂直方向margin塌陷</title>
    <style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }

    .box1 {
        width: 200px;
        height: 200px;
        background-color: red;
        margin-left: 100px;
        margin-top: 100px;
        position: absolute;
    }

    .box2 {
        width: 100px;
        height: 100px;
        background-color: green;
        margin-top: 50px;

    }
    </style>
</head>

<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>

</html>

例3图：

Nemo.1213

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
垂直方向margin塌陷现象

现象描述：标准文档流中，父子结构的盒子，竖直方向的margin不叠加，以较大的为准。如果不在标准文档流中，比如两个盒子都浮动了，则不存在塌陷现象，上下margin可叠加。例1：<!DOCTYPE html><html><head> <title>垂直方向margin塌陷</title> <style type="text/css"> * { margin: 0;
复制链接

扫一扫