css外边距垂直合并

最新推荐文章于 2022-07-12 21:00:00 发布

奈何桥边摆地摊

最新推荐文章于 2022-07-12 21:00:00 发布

阅读量241

点赞数

分类专栏： CSS 文章标签： css css3 html

本文链接：https://blog.csdn.net/qq_27135095/article/details/122635830

版权

CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

CSS 外边距垂直合并

何为外边距垂直合并？

当普通文档流的相邻元素设置了margin-top或margin-bottom时，垂直方向上的外边距会变成相邻元素中外边距较大的一个，而不是两个元素外边距之和。

例子

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        main{
            margin:150px;
            width: 300px;
            height: 300px;
        }
        div{
            width: 100px;
            height: 100px;
            background-color: rebeccapurple;
            color: white;
            font-size: 1.5em;
            background-clip: content-box;
            margin: 10px;
        }
    </style>
</head>
<body>
    <main>
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </main>
</body>
</html>

按照常规理解，此处相邻的div在垂直方向上应该有10+10=20px大小的外边距，但是实际上相邻的div垂直方向上只有10px的外边距。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xpSyyh3b-1642826454988)(C:\Users\liuxin\AppData\Roaming\Typora\typora-user-images\image-20220110151338727.png)]