本文主要是介绍css margin，padding 百分比，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
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、 页面排版习惯。我们都习惯于上下滑动页面，不习惯左右滑动，所以页面通常设计成左右刚好铺满，上下可拖动，高度不固定。这样用宽度做参照就比较容易控制
这篇关于css margin，padding 百分比的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
