margin：子元素添加margin-top影响父元素；上下盒子添加外边距重叠问题

最新推荐文章于 2024-07-29 15:16:06 发布

雪…

最新推荐文章于 2024-07-29 15:16:06 发布

阅读量7k

点赞数 26

分类专栏：前端文章标签： css html5

本文链接：https://blog.csdn.net/weixin_43498333/article/details/108344382

版权

前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

这几天看margin看的有点晕，写篇博客细细梳理一下 margin 的一些问题。主要是两个方面的，1. 子元素添加 margin-top 父元素也会下移；2.当兄弟关系的两个盒子同时添加外边距时，相邻的外边距会重叠。

参考W3school：CSS外边距合并问题

一、子元素添加 margin-top ，父元素也会受影响，也像添加了 margin-top一样下移。

原因分析：
这个“问题”……它是CSS2.1的盒模型中规定的内容——Collapsing margins：

In this specification, the expression collapsing margins means that adjoining margins (no non-empty content, padding or border areas or clearance separate them) of two or more boxes (which may be next to one another or nested) combine to form a single margin.

所有毗邻的两个或更多盒元素的 margin 将会合并为一个margin共享之。毗邻的定义为：同级或者嵌套的盒元素，并且它们之间没有非空内容、Padding或Border分隔。

当直接给大盒子中添加小盒子时，就会产生 margin 合并，如下：
代码1：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			.father{
				width: 500px;
				height: 500px;
				background-color: red;
			}
			.son{
				width: 300px;
				height: 300px;
				background-color: green;
				margin-top: 100px;
			}
		</style>
	</head>
	<body>
		<div class="father">
			<div class="son">
			</div>
		</div>
	</body>

</html>

结果1：
在这里插入图片描述
解决办法： 破坏出现的条件即可

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			.father{
				width: 500px;
				height: 500px;
				background-color: red;
				/* border: #000000 3px solid;	1. 给父元素添加边框 */
				/* padding-top: 100px;			2.给父元素添加内填充,用 padding 
													替换margin-top */
				/* overflow: hidden;			3.设置 overflow:hidden; */
				/* position: absolute;			4.父元素设置绝对定位 */
				/* float: left;					5.父元素设置浮动 */
				/* display: inline-block;		6.父元素修改元素类型 */
			}
			.son{
				width: 300px;
				height: 300px;
				background-color: green;
				margin-top: 100px;
				/* position: absolute;			7.子元素设置绝对定位 */
				/* float: left;					8.子元素设置浮动 */
				/* border: #000000 3px solid;	给子元素添加边框无效 */
			}
			/* .father::before{
				content: "a";
				display: block; */
				/* overflow: hidden; 			9.使用伪对象选择器，给父元素前添加
					内容，虽然为空，但是添加属性 overflow:hidden; 可以消除影响  */
			}
		</style>
	</head>
	<body>
		<div class="father">
			<div class="son">
			</div>
		</div>
	</body>

</html>

注：上述9种解决办法，比较好理解的：给父元素添加 border 和 padding 可以消除，是从 css 触发规范上解决问题，不过我疑惑的是为什么给子元素添加边框无法消除问题？给父元素和子元素添加绝对定位 position:absolute /fixed、 float:left / right 属性，也可以消除问题，因为浮动元素和绝对定位元素不参与边距合并。

父元素添加 overflow：hidden/auto ， display: inline-block；这两种方法是将父元素转化为BFC（页面布局中一块独立区域，其边距等属性不受其他元素影响。）

至于第9种方法，在父元素所有内容前用伪对象加一个块元素，尝试了一下，这个块元素中的 content:"" 中有内容时（中英文，空格不行），或者给这个块元素添加属性 overflow: hidden; 这两种情况下也可以解决这个问题，不过好像复杂了一些…

二、上下盒子添加外边距重叠问题

原因分析：
写在一个博客中的原因就是俺觉得这俩问题产生的原因是一样的，源自上面css 2.1中的规范。

代码2：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			.father {
				width: 300px;
				height: 500px;
				margin: 0 auto;
				background-color: skyblue;
				overflow: hidden;
			}

			.son1 {
				width: 100px;
				height: 100px;
				margin: 100px;
				background: green;
			}

			.son2 {
				width: 100px;
				height: 100px;
				margin: 100px;
				background: green;
			}
		</style>
	</head>
	<body>
		<div class="father">
			<div class="son1"></div>
			<div class="son2"></div>
		</div>
	</body>
</html>