设置边距大小为'％`...父或元素相对性？

Question

假设我们有以下HTML：

<div id='parent'>
   <div id='child'>
   </div>
</div>

如果我们设置这个CSS：

 #parent {
     width:1000px;
     height:1000px
 }
 #child {
    width:20%;
    height:40%;
    margin-top:10%;
 }

子元素的margin-top将是父级身高或子身高的%？还有一种不同的方式，浏览器在边距时呈现%大小？如果有padding应用于子/父，则会影响margin？

Answer 1

检查的最佳方式是test it out yourself;）

关于宽度，高度的所有百分比都是根据父容器的宽度计算的 - 在这种情况下，#child元素的宽度为200px，高度为400px。

同时，填充和边距，基于百分比，are calculated from the containing parent's width：因此#child的上边距为100px。

请注意垂直边距（即顶部和底部边距）may collapse under some circumstances。在我发布的fiddle中，情况确实如此。