margin 重叠

最新推荐文章于 2022-07-19 09:40:09 发布

一只鱼_

最新推荐文章于 2022-07-19 09:40:09 发布

阅读量2.1k

点赞数

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

本文链接：https://blog.csdn.net/sinat_31102083/article/details/78943383

版权

CSS 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

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>

这里写图片描述

一只鱼_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
margin 重叠

margin重叠发生的情况： 1、只发生在block元素上，不包括float、absolute、inline-block元素 2、只发生在垂直方向上 margin重叠总结如下： 1、相邻兄弟元素<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <
复制链接

扫一扫

专栏目录