margin到底相对谁？

最新推荐文章于 2022-11-14 22:36:22 发布

秋天1014童话

最新推荐文章于 2022-11-14 22:36:22 发布

阅读量6k

点赞数 2

分类专栏： web前端 CSS3

本文链接：https://blog.csdn.net/u013217071/article/details/52489281

版权

web前端同时被 2 个专栏收录

128 篇文章 1 订阅

订阅专栏

CSS3

27 篇文章 0 订阅

订阅专栏

margin垂直方向上存在以下问题：

外边距合并现象
- 如果两个div上下排列，给上面div设置margin-bottom，给下面div设置margin-top，那么两个margin会发生合并现象，会取较大的margin值。
- 注意：左右不会发生外边距合并现象
上下塌陷现象
- 一个大盒子中包含一个小盒子，给小盒子设置一个margin-top，大盒子会一起向下平移。
- 注意：margin左右没有塌陷现象

如果父元素在子元素的margin的同向上有padding或border的话，子元素的margin相对于父元素，否则相对于父元素以外的元素。

上面这句总结不要记住，理解原理：就是BFC，可以参考我的一篇博客：高度坍塌问题-BFC解析

我们还是看例子吧：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>margin</title>
<style type="text/css">
    .parent{width: 300px;line-height: 1.8; outline: 1px dashed red;}
    .sample{height: 150px;background-color: pink;}
    .sb{width: 300px;height: 150px;background-color: #0ff;}
    .sample{margin-bottom: 50px;}
</style>
</head>
<body>
    <div class="parent">
        <div class="sample">sample</div>
    </div>
    <div class="sb">after</div>
</body>
</html>

此时父元素在子元素的margin的同向上（bottom）没有padding或border，子元素的margin相对于父元素以外的元素。红色框包围的是父元素，效果如图：

这里写图片描述

这个时候，如果给父元素添加下边框（与子元素margin同向）的话，css为：.parent{border-bottom: 5px solid red;} 那么子元素的margin相对于父元素。效果如下：

这里写图片描述

如果我们不加边框而是增加下内边距（与子元素margin同向）的话,css为:.parent{padding-bottom: 50px;}
那么子元素的margin相对于父元素(为了看到内边距效果，可以在父元素上设 .parent{outline: 1px dashed red;})。效果如下：

这里写图片描述

padding或者border会产生BFC，此外还有很多情况会产生BFC，但是padding和border只会产生对应方向上的。比如我这里只设置padding-bottom，若子元素还有margin-top：10px、那么top仍然会产生这个现象。

最后，真的好好理解BFC。

可以参考我的一篇博客：高度坍塌问题-BFC解析

秋天1014童话

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
margin到底相对谁？

margin垂直方向上存在以下问题：外边距合并现象如果两个div上下排列，给上面div设置margin-bottom，给下面div设置margin-top，那么两个margin会发生合并现象，会取较大的margin值。注意：左右不会发生外边距合并现象上下塌陷现象一个大盒子中包含一个小盒子，给小盒子设置一个margin-top，大盒子会一起向下平移。注意：margin左右没有塌陷现
复制链接

扫一扫

专栏目录