margin，padding的百分比都是相對于最近的父級容器的寬度 width 進行計算的
<!DOCTYPE html>
<html >
<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、 頁面排版習慣。我們都習慣于上下滑動頁面，不習慣左右滑動，是以頁面通常設計成左右剛好鋪滿，上下可拖動，高度不固定。這樣用寬度做參照就比較容易控制
![web前端布局練手項目[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)