HTML元素的margin/padding的值使用百分比時以父元素的寬為準
HTML元素margin/padding的值如果使用百分比的時候，一律是按照父級的width來計算的，包括垂直方向上的（margin-top/margin-bottom，padding-top/padding-bottom）。
以前一直都沒太注意，知道真相的我眼珠子掉下來。
百度了下得到如下精辟話語：
margin/padding-top/bottom 的百分比之所以按照 width 計算，其實理由很簡單，就是要匹配主要的 use cases。那就是——要構建在縱橫兩個方向上相同的 margin/padding。如果兩個百分比的相對方式不同，那用百分比就無法得到垂直和水平一致的留白。
知道了結論，這樣的話就多了很多應用場景。
1，自適應布局： 父級樣式：position:relative;padding-top:40%;子元素樣式：position:absolute; height:100%;這樣就可以構建一個動態的盒子，他的高度隨著寬度的變化而變化。移動端布局的時候很有用，會隨著不同屏幕的寬度變化而變化，從而適應多種屏幕。
2，構建動態正方形：width:50%;padding-top:50%; height:0;這樣一個盒子就是一個標準的正方形了，并且隨著寬度變化而變化。結合上面的自適應布局，能完成很多效果。
BTW：有時候使用這種布局的時候，文字的高度會成為一種不確定性，這個時候可以使用line-height:0來讓盒子不考慮字體的高度。