388day（盒子模型补充，外边距合并，塌陷）

最新推荐文章于 2024-05-21 15:50:49 发布

原创最新推荐文章于 2024-05-21 15:50:49 发布 · 171 阅读

0 ·

CC 4.0 BY-SA版权

本文深入探讨了CSS盒子模型的细节，包括如何使内容和盒子本身居中，以及解释了外边距合并的问题。通过具体示例，展示了在不同情况下外边距如何合并，并提供了几种解决策略。

《2018年10月27日》【连续388天】

标题：盒子模型补充，外边距合并，塌陷；
内容：

div {
	/*内容居中*/
	text-align: center;
	/*盒子居中*/
	/*margin: 0 auto;*/
	/*margin-left: auto;
	margin-right: auto;*/
	/*margin: auto;*/
}

<!-- 小图标，大图用背景 -->
	
	<div class="b1"></div>
	<div class="b2"></div>

* {
	margin: 0px;
	padding: 0px;
}

div{
	background-color: black;
	width: 200px;
	height: 200px;
}

.b1 {
	margin-bottom: 100px;
}

.b2 {
	background-color: blue;
	margin-top: 50px;
}

/*外边距合并问题，
两个盒子的外边距会合并，并且以大为标准；*/

<div class="father">
		<div class="son"></div>
	</div>

/*对于两个嵌套关系的块，如果父元素没有上内边距及边框，则父元素的上外边距会与子元素
的上外边距发生合并，以大者为依据；*/
.father {
	width: 500px;
	height: 500px;
	background-color: black;
}

.son {
	width: 100px;
	height: 100px;
	background-color: blue;
	margin-top: 50px;
}