margin 重叠

最新推荐文章于 2025-06-12 07:23:59 发布

一只鱼_

最新推荐文章于 2025-06-12 07:23:59 发布

阅读量2.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS 文章标签： margin垂直坍塌 margin问题 margin-top

本文链接：https://blog.youkuaiyun.com/sinat_31102083/article/details/78943383

CSS 专栏收录该内容

12 篇文章

订阅专栏

本文详细介绍了CSS中margin重叠的现象及其发生的条件，包括相邻兄弟元素间的重叠、父级与子元素之间的margin传递，以及空的block元素的特殊情况。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

margin重叠发生的情况：
1、只发生在block元素上，不包括float、absolute、inline-block元素
2、只发生在垂直方向上
margin重叠总结如下：
1、相邻兄弟元素

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body {
            margin: 0;
        }
        p {
            background-color: #a0ffb3;
            height: 100px;
            margin: 100px 0;
        }
    </style>
</head>
<body>
    <p>margin重叠</p>
    <p>margin重叠</p>
</body>
</html>

这里写图片描述

2、父级元素和第一个或最后一个子元素（margin传递）
父子级margin重叠需要满足以下几个条件:
01、父元素不是BFC元素
02、父元素没有padding-top值
03、父元素没有border-top值

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body {
            margin: 0;
        }
        .parent {
            background-color: #fff48c;
            height: 50px;
        }
        .child {
            margin-top: 20px;
            background-color:  red;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child">自元素</div>
    </div>
</body>
</html>

这里写图片描述

3、空的block元素
必须满足的条件：
01、元素没有border值=
02、元素没有padding值
03、元素里面没有inline元素
04、没有height

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body {
            margin: 0;
        }
        .parent {
            background-color: #fff48c;
            overflow: hidden;
        }
        .child {
            margin: 20px 0;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child"></div>
    </div>
    margin重叠
</body>
</html>

这里写图片描述