例 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 */
}