盒子模型常见问题之外边距

一．兄弟元素

左右margin相加，上下margin取大值

二．父子元素

左右margin设置离父元素左右的距离，上下margin可能会传递给父元素(子元素与父元素相邻)

三．外边距重叠

给与父元素相邻子元素一个上/下的外边距，会传递到父元素

	div {
				width: 500px;
				/* 设置div上下外边距为100px，左右auto=》设置div在包含块水平居中 */
				margin: 100px auto;
				background-color: pink;
				color: gold;
				font-size: 20px;
				font-weight: 600;
				text-align: center;
				height: 200px;
				/* display: table; */
			}

			div>div {
				margin-top: 20px;
			}

<div>
	<div>既然不想说再见，那明天见;
	     明晨行别,但愿云彩,艳阳一直陪伴你走到远远的天涯;鲜花,绿草相随你铺展远远的前程
	</div>
</div>

 

 设置父元素：

解决方案1：给父元素设置display：flex

解决方案2：给父元素添加一个边框，此时要注意边框会撑大元素本身，所以此时需要添加box-sizing：border-box

解决方案3：通过设置父元素的padding来实现，此时会发生与添加边框一样的问题

解决方案4：设置父元素浮动，但父元素会脱离文档流

解决方案5：设置父元素绝对定位或固定定位，使父元素脱离文档流

解决方案6：设置父元素overflow值不为默认值

方案4、5、6是开启父元素的BFC

解决方案7：设置父元素一个伪元素选择器设置

.wrap::before {
				display: table;
				content: "";
			}

注意要设置为display：table；

一般与解决高度塌陷一起设置

.fa::before,

.fa::after{

              content: "";

              display: table;

              clear: both;

       }

设置子元素

解决方案1：给子元素设置浮动，此时margin：50px auto；auto失效

设置html页面：

解决方案1：在父与子元素之间添加一个table标签