margin，padding的百分比都是相對於最近的父級容器的寬度 width 進行計算的
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>百分比</title><style type="text/css">* {margin: 0;padding: 0;}.father {width:500px;height: 100px;background: green;}.child {display: box;width: 300px;height: 100px;margin-left: 20%;padding-left: 20%;background: pink;box-sizing: border-box;}.child span {background: red;}</style></head><body><div class="father"><div class="child"><span>child</span></div></div></body></html>
猜測主要原因：
1、為了統一比例，如果寬和高比例相同（比如都是10%），結果頁面效果卻顯示的一個有100px, 一個有200px那麼大， 豈不是太糟糕；
2、 頁面排版習慣。我們都習慣於上下滑動頁面，不習慣左右滑動，所以頁面通常設計成左右剛好鋪滿，上下可拖動，高度不固定。這樣用寬度做參照就比較容易控制
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
