html - 使用 `%` 设置边距大小...父或元素相对性？

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应用于 child/parent ，它会影响margin?

Answer 1

最好的检查方法是自己测试一下；）

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

同时，当基于百分比时，paddings 和 margins是根据包含父项的 width 计算的：因此#child将具有 100px 的上边距。

请注意，在某些情况下，垂直边距（即顶部和底部边距）可能会塌陷。在我发布的小提琴中，情况正是如此。