css深入浅出系列之：子元素某些表示竖向距离属性的百分比设定是相对于父容器的宽度，而不是高度

css深入浅出系列只是自己在学习css的时候的一些个人见解，有错误的地方，欢迎在评论中指正噢~

css深入浅出系列之：子元素某些表示竖向距离属性的百分比设定是相对于父容器的宽度，而不是高度

我们看下下面的代码，算一下子元素#son的margin-top: 20%;到底是多少

#father {
	border-top: 1px solid #f2f4f6;
	width: 100px;
	height: 200px;
	background-color: red;
}
	
#son {
	height: 20%;
	width: 20%;
	background-color: black;
	margin-top: 20%;
	/*margin-top: 20px;*/
	color: white;
}

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

我们知道，当一个子元素按百分比设定一个元素的宽高时，它的大小是按照父元素的宽高来计算的，不过，当一些表示竖直距离的属性，比如padding-top,padding-bottom,margin-top,margin-bottom在子元素里面我们按照百分比设置这些属性的值是，他们的大小却是按照父元素的宽度来计算的，而不是按照父元素的高度来计算。

回到上面的代码，看下结果

子元素#son的margin-top: 20%最终是等于父元素width:20%，也就是20px的，而不是40px。