最近觉得，我学CSS学得太不细致了，margin、padding这些天天都在用的属性，我却没有真正了解它们、掌握它们。今天，就对这两个属性做一个细致的总结吧！
文章结构：
- 块级元素的padding、margin
- 行内元素的padding、margin
- padding使用的小技巧
- 总结
一、块级元素的padding、margin
首先我们来看MDN对margin取值的解释：
我们再看MDN对padding取值的解释：
我们只看取值为<percentage>（即<百分比>）的情况。文档说道：当margin和padding取百分比的时候，该百分比都是相对于包含该元素的块的宽度（相对于该块的百分比）。
对于这句话，有两个特别重要的要点需要掌握。
1、要点一
按照惯性思维来说，假如我设置子元素的margin/padding-left/right为n%，那么子元素的margin/padding-left/right=父元素宽度 * n%；设置子元素的margin/padding-top/bottom为n%，那么子元素的margin/padding-top/bottom=父元素高度 * n%。嗯，之前我也是这么认为的 ······T^T
实际上，不管设置margin/padding-top/bottom/left/right，子元素的margin/padding-top/bottom/left/right=父元素宽度 * n%。
我们先看margin：
//html
<body>
<div class='parent'>
11
<div class='child'></div>
</div>
</body>
// css
.parent{
width:400px;
height:200px;
background:#ddd;
margin-top:10px;
}
.child{
width:200px;
height:100px;
background:pink;
margin-left:100%;
margin-top:100%;
}
结果：
你看，.child的margin-top是400px而非200px。
我们再看padding：
//html
<body>
<div class='parent'>
11
<div class='child'>
22
</div>
</div>
</body>
// css
.parent{
width:400px;
height:200px;
background:#ddd;
margin-top:10px;
}
.child{
width:200px;
height:100px;
background:pink;
padding-left:100%;
padding-top:100%;
}
结果：
你看，.child的padding-top是400px而非200px。
总结：块级元素的padding和margin取百分比值的时候，都是相对于父元素的宽度来计算的。
2、要点二
根据要点一我们知道：<percentage>都是相对于父元素的宽度来计算的。
由此又出现了另外一个问题：父元素的宽度具体指什么呢？仅仅包含父元素的内容区域（即box-sizing:content-box）？还是包括父元素的padding、border（即box-sizing:border-box）?甚至包含父元素的margin？
在要点一的解释中，我没有给父元素设置padding/border/margin，就是为了消除这三个属性给父元素宽度带来的影响。现在，我们就重点来看这三个属性给父元素宽度带来的影响。
直接上代码：
// html
<body>
<div class='parent'>
11
<div class='child'>
22
</div>
</div>
</body>
// css
.parent{
width:400px;
height:200px;
background:#ddd;
margin-top:100px;
margin-left:100px;
padding-top:100px;
padding-left:100px;
border:100px solid yellow;
}
.child{
width:200px;
height:100px;
background:pink;
padding-left:100%;
padding-top:100%;
}
结果：
.child的padding和margin仍为400px，即父元素内容区域宽度。
在上面的测试中，我们没有对box-sizing进行设置，因此默认的box-sizing为content-box。下面，我们设置box-sizing:border-box，再来看结果：
// html
<body>
<div class='parent'>
11
<div class='child'>
22
</div>
</div>
</body>
// css
*{
box-sizing:border-box;
}
.parent{
width:500px;
height:400px;
background:#ddd;
margin-top:100px;
margin-left:100px;
padding-top:100px;
padding-left:100px;
border:100px solid yellow;
}
.child{
width:300px;
height:300px;
background:pink;
padding-left:100%;
padding-top:100%;
}
为了方便观察，我们改变父元素的宽度为500px、高度为400px；改变子元素的宽度为300px、高度为300px。结果如下：
.child的padding和margin仍为200px，即父元素内容区域宽度。
总结：子元素的padding、margin的百分比取值都是相对于父元素的内容区域宽度来计算的。
二、行内元素的padding、margin
首先我们将行内元素的padding设置为数值：
// html
<body>
<div>
aaa
<span>xxyy</span>
sssssssssssssssssssssssssssssssssssssssssssssssssssss
</div>
</body>
// css
body{
word-break:break-all;
}
div{
width:400px;
height:200px;
background:#ddd;
padding-top:150px;
}
span{
border:1px solid blue;
background:pink;
padding-left:100px;
padding-right:100px;
padding-top:100px;
padding-bottom:100px;
}
结果：
由图可知，inline元素可以设置padding-left/right/top/bottom，但是设置padding-top/bottom不改变布局，因而设置padding-top/bottom无效；同时我们看到，inline元素的background区域 = content + padding区域。
我们将上述span中的padding全部改为margin：
// css
span{
border:1px solid blue;
background:pink;
margin-left:100px;
margin-right:100px;
margin-top:100px;
margin-bottom:100px;
}
结果：
我们得到了相同的结论，margin-left/right生效了，但margin-top/bottom没有生效。
我们将行内元素的padding设置为百分比：
// html
<body>
<div>
aaa
<span>xxyy</span>
tttttsssssssuuuuuuzzzzzzzyyyyyyyhhhhhhh
</div>
</body>
// css
body{
word-break:break-all;
}
div{
width:300px;
height:200px;
background:#ddd;
}
span{
border:1px solid blue;
background:pink;
padding-left:100%;
padding-bottom:100%;
}
结果：
由图可知，padding-left/bottom相同，均为300px。（同块状元素）
总结：
1、inline元素设置padding/margin-left/right生效，但padding/margin-top/bottom不生效；inline元素的高度由字体和行高决定。
2、inline元素的background区域 = content区域 + padding区域。
3、inline元素的padding、margin的百分比取值也是相对于父元素的内容区域宽度来计算的。
三、padding使用的小技巧
我们对padding的使用做一个小拓展，用padding做一个正方形。代码如下：
// html
<body>
<div class='parent'>
<div class='child'></div>
</div>
</body>
// css
*{
box-sizing:border-box;
}
.parent{
margin:100px auto;
background:#ddd;
padding:100px;
}
.child{
height:0;
background:pink;
padding-top:100%;
overflow:hidden;
position:relative;
}
结果：
.child就是我们需要的正方形。这个正方形是怎么做出来的呢？重点就是.child中的height:0;padding-top:100%;。设置"padding-top:100%"使.child的padding-top与
父元素的宽度相等，而子元素又继承了父元素的宽度，所以子元素的padding-top与子元素的宽度相等，因此构成了一个正方形。
由此，我们可以设计各种比例的长方形，只需改变子元素的padding-top的百分比即可。
有了上面的铺垫后，我们来做一个宽高固定为2:1的img（但是不知道img宽高的具体数值）。代码如下：
// html
<body>
<div class='parent'>
<div class='child'>
</div>
</div>
</body>
// css
*{
box-sizing:border-box;
}
.parent{
margin:100px auto;
background:#ddd;
padding:100px;
}
.child{
height:0;
background:pink;
padding-top:50%;
overflow:hidden;
position:relative;
}
.child>img{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
结果：
分析：由于.child的height为0，并且设置了"overflow:hidden"，所以.child无论添加什么元素都无法显示（因为被hidden了）。这时，对要显示的img设置绝对定位，并把img覆盖整个.child，就使img的宽高为2:1。
这样，在不知道img具体尺寸的情况下，做出了一个宽高比为2:1的img图片。
四、总结
对于padding、margin这些属性，行内元素和块状元素的相同点：
- padding、margin的百分比取值都是相对于父元素的内容区域宽度来计算的。
- background区域 = content区域 + padding区域。
行内元素和块状元素的不同点：
- 行内元素设置padding/margin-top/bottom不生效。
- margin可为负值，但padding不可为负。
另，margin还存在一个“margin合并”的问题，我在博客margin合并中也进行了相应的整理。
由于个人水平有限，博客错误之处，烦请指正！
网友评论