在前端開發過程中，設定樣式引數margin 與 padding 值為百分數時，其具體值的計算方法需參照最近父級的width計算。

1）exp1: margin-top 為百分數

其中標籤的巢狀關係為：

<div class="boxparent">
    父級box
    <div class="listbox">
      子box
    </div>
  </div>

樣式為：

.boxparent {
    width: 400px;
    height: 300px;
    background-color: bisque;
 }

 .listbox {
    width: 100px;
    height: 100px;
    margin-top: 30%;
    background-color: aquamarine;
  }
 

計算得到的margin-top值為：400 * 30% = 120px;

2）exp2: padding-top 為百分數

其中標籤的巢狀關係為：

<div class="boxparent">
    父級box
    <div class="listbox">
      子box
    </div>
  </div>

樣式為：

.boxparent {
    width: 400px;
    height: 300px;
    background-color: bisque;
 }

 .listbox {
    width: 100px;
    height: 100px;
    padding-top: 30%;
    background-color: aquamarine;
  }
 

計算得到的padding-top值為：400 * 30% = 120px;

3) margin-left，padding-left，margin-right，padding-right，margin-bottom，padding-bottom同於margin-top / padding-top的計算方式。