[CSS]CSS属性 margin

最新推荐文章于 2023-07-10 18:16:54 发布

Feathers .

最新推荐文章于 2023-07-10 18:16:54 发布

阅读量494

点赞数 1

分类专栏： Web前端文章标签： css margin 塌陷

本文链接：https://blog.csdn.net/xf616510229/article/details/53698779

版权

Web前端专栏收录该内容

14 篇文章 0 订阅

订阅专栏

margin

margin代表外边距，是CSS常用的属性之一，和Android中的外边距有类似的效果。

margin塌陷现象

在CSS标准流中除了 [CSS]CSS浮动float详解（一）：标准文档流说的那些奇葩的规则外，还有一个mdzz的规则，(可能是宝宝太嫩，体会不到这样设计的目的)，那就是margin塌陷现象。

标准文档流中，竖直方向的margin不叠加，以较大的为准。

什么意思呢？

<!DOCTYPE html>
<html>
<head>
    <title>test</title>
    <style type="text/css">

        *{
            margin: 0;
            padding: 0;
        }
        .p1{
            width: 200px;
            height: 200px;
            background-color: orange;
            margin-bottom: 100px;
        }
        .p2{
            width: 200px;
            height: 200px;
            background-color: skyblue;
            margin-top: 200px;
        }
    </style>
</head>
<body>
    <p class="p1"></p>
    <p class="p2"></p>
</body>
</html>

如上代码，我们在浏览器上绘制两个块级元素，设置一个下边距为100px，另一个上边距为200px，两个元素之间的间距应该为300px，但是神奇的事情出现了：
这里写图片描述

从上图我们可以看出，这两个元素之间的间距只有200px。

这就是所谓的margin塌陷现象！！（这不是没事找事儿吗）

脱离标准流就没有这种现象了！脱离标准流就没有这种现象了！脱离标准流就没有这种现象了！脱离标准流就没有这种现象了！脱离标准流就没有这种现象了！脱离标准流就没有这种现象了！

盒子居中

margin中有两个属性，

1margin-left: auto; /*左边距自定设置*/
margin-right: auto; /*右边距自定设置*/

margin-left:auto将左边距自动设定，默认会占用左侧所有的位置为边距：
这里写图片描述

而同时设置1margin-left: auto;与margin-right: auto;会使元素居中，这是因为空白会被两侧平均分配。

可以简写为margin:0 auto

magin的奇葩现象

margin元素的初衷是用来表示兄弟元素之间的边距，而不是用来表示父子元素之间的边距，padding通常用来表示父子之间的边距。

有如下代码：

<!DOCTYPE html>
<html>
<head>
    <title>test</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .div1{
            width: 300px;
            height: 300px;
            background-color: orange;
        }
        .div2{
            width: 100px;
            height: 100px;
            background-color: skyblue;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div class="div1">
        <div class="div2"></div>
    </div>
</body>
</html>

效果如下：
这里写图片描述

我们看到，我们设置内部的divmargin-top:20px，希望div2距离div1有20px的间隔，结果div1也跟着margin了。

我们给div1加一个边框，然后又正常了！
这里写图片描述

这里写图片描述

之所以出现这个状况主要是因为margin在改变间距时，实际上改变的是整个行，使用margin-top:20px;是将整个行侠义20px，所以就造成了这个效果，但是为什么加上边框后就可以了？谁设计的！出来，宝宝保证不打死你！

脱离文档流后

脱离文档流后，这种坑爹的效果就消失了，和margin的塌陷现象相同。

建议

所以，我们在表示父子的间距时，要尽量使用父元素的padding来表示子元素的外边距。
能不用margin就不用margin ，属性太坑！

Feathers .

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
[CSS]CSS属性 margin

marginmargin代表外边距，是CSS常用的属性之一，和Android中的外边距有类似的效果。margin塌陷现象在CSS标准流中除了 [CSS]CSS浮动float详解（一）：标准文档流说的那些奇葩的规则外，还有一个mdzz的规则，(可能是宝宝太嫩，体会不到这样设计的目的)，那就是margin塌陷现象。标准文档流中，竖直方向的margin不叠加，以较大的为准。什么意思呢？<!DOCTYPE
复制链接

扫一扫