CSS 外边距(margin)重叠及防止方法

最新推荐文章于 2023-02-05 16:03:14 发布

一月清辉

最新推荐文章于 2023-02-05 16:03:14 发布

阅读量1.2k

点赞数 2

分类专栏： css布局文章标签：外边距重叠

原文链接：https://blog.csdn.net/u011052350/article/details/49611305

版权

css布局专栏收录该内容

42 篇文章 5 订阅

订阅专栏

外边距重叠

1、外边距重叠时边距计算规则

在规范文档中，2个或2个以上的块级盒模型，垂直相邻的margin会重叠。最终的margin值计算方法如下

margin同正，则取最大值；
margin同负，则取最小值；
margin一正一负，则取二者之和。

2、边界叠加情况

2.1 兄弟元素底边界与顶边界叠加

当一个元素出现在另一个元素上面时，第一个元素的底边界与第二个元素的顶边界发生叠加，见图
在这里插入图片描述

<div style="margin-bottom:30px"></div>
<div style="margin-top:20px"></div>

2.2 父子元素各自顶边距(底边距)的边距叠加

父子元素都具有顶边距或底边距时，边距叠加情况如图
在这里插入图片描述

<div>
    <div style="margin-top:30px;" class="centerLayer">
          <div style="margin-top:20px"></div>
    </div>
</div>

3、外边距重叠解决方案：

兄弟元素底边界与顶边界叠加的情况（重叠情况2.1）：

外层元素margin边距用padding代替

父子元素各自顶边距(底边距)的边距叠加的情况（重叠情况2.2）：

这里的内层元素指class为centerLayer的那层

内层元素创建BFC容器来做隔离（以下方法任选一）
- 1、外层元素 overflow:hidden;
- 2、外层元素绝对定位 postion:absolute:
- 3、外层元素加float:left;或display:inline-block;
内层元素透明边框 border:1px solid transparent;
内层元素padding:1px;

4、经典案例

父元素高度是否被margin撑开的问题

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.parent{
				background: gray;   /*不添加overflow:hidden,则不撑开,parent 高度100*/
				overflow: hidden;   /*添加overflow:hidden,高度撑开,parent 高度200*/
			}
			.child{
				background: red;
				height: 100px;
				margin-top: 100px;
			}
	    </style>
	</head>

	<body>
		<div class="parent">
			<div class="child"></div>
		</div>
	</body>
</html>

5、外边距合并的意义

外边距合并初看上去可能有点奇怪，但是实际上，它是有意义的。以由几个段落组成的典型文本页面为例。第一个段落上面的空间等于段落的上外边距。如果没有外边距合并，后续所有段落之间的外边距都将是相邻上外边距和下外边距的和。这意味着段落之间的空间是页面顶部的两倍。如果发生外边距合并，段落之间的上外边距和下外边距就合并在一起，这样各处的距离就一致了。（图例如下）
在这里插入图片描述

参考链接：https://blog.csdn.net/u011052350/article/details/49611305
参考链接：http://www.hujuntao.com/web/css/css-margin-overlap.html
参考链接：https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing

一月清辉

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
CSS 外边距(margin)重叠及防止方法

外边距重叠1、外边距重叠时边距计算规则在规范文档中，2个或2个以上的块级盒模型，垂直相邻的margin会重叠。最终的margin值计算方法如下margin同正，则取最大值；margin同负，则取最小值；margin一正一负，则取二者之和。2、外边距重叠解决方案：外层元素margin边距用padding代替外层元素 overflow:hidden;内层元素透明边框 border:1px solid transparent;内层元素绝对定位 postion:absolut
复制链接

扫一扫