标签：重叠 top 元素 100px height 塌陷 margin css

margin的合并属性（外边距重叠）

一、先看两个问题：

1. 现在我们有两个块级元素垂直排列，A元素的margin-bottom为100px，B元素的margin-top为50px；
   请问这两个元素的距离是多少？
   直觉上我们认为应该是100px+50px=150px
   但实际情况却是这样的：
   
   A与B的实际距离只有100px！
   这是因为margin属性会自动将垂直的两个margin距离合并，合并后的距离为两个元素中margin距离较大的那个。
2. 有一个父元素和一个子元素：

	<style type="text/css">
		.parent{
			margin-top: 0px;
			width: 200px;
			height: 200px;
			background-color: #008000;
		}
		.children{
			margin-top: 50px;
			width: 100px;
			height: 100px;
			background-color: #FF7F50;
		}
	</style>

	<div class="parent">
		<div class="children"></div>
	</div>

你可能以为会是这样：

但实际情况是这样：

可以看到子元素的margin出现在了父元素上面，父块元素和其内后代块元素外边界重叠，重叠部分最终会溢出到父级块元素外面。

解决方法：

1. 这种状况发生在margin属性上，那么可以用其他的属性代替，比如padding；
2. 相邻的两个元素之间的外边距重叠，后一个元素加上clear-fix清除浮动；
3. 父子元素之间，为父块元素设置：border、padding、高度height等；
4. 在两个重叠的元素间加上一个伪元素隔开；

参考资料：

MDN Web Docs

标签：重叠,top,元素,100px,height,塌陷,margin,css
来源： https://www.cnblogs.com/lijunda0523/p/14973618.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。