例 1

很明显，假设 margin-left 和 margin-right 的边际百分比值将相对于其父元素。

.parent {
    width : 500px;
    height: 300px;
}

.child {
    width : 100px;
    height: 100px;
    margin-left: 10%;  /* (parentWidth * 10/100) => 50px */
}

但是，当来到 margin-top 和 margin-bottom 时，情况并非如此。这两个属性（以百分比表示）不是相对于父容器的高度而是相对于父容器的宽度。

所以，

.parent {
    width : 500px;
    height: 300px;
}

.child {
    width : 100px;
    height: 100px;
    margin-left: 10%;  /* (parentWidth * 10/100) => 50px  */
    margin-top: 20%;   /* (parentWidth * 20/100) => 100px */
}