Padding 会改变元素的布局尺寸
如果是块级元素，padding 会改变元素水平和垂直方向的布局尺寸
例子：
<style>
div {
background: #ccc;
width: 50px;
height: 50px;
padding: 5px;
}
</style>
<div></div>
例子中，我们可以看到，div 元素的宽高均为 50px，但其实际占据的空间却是 60px，原因就是 padding 影响了元素水平和垂直方向的布局。
如果是内联元素，padding 只会改变元素水平方向的布局尺寸
例子：
<style>
strong {
background: #eee;
opacity: .8;
padding: 10px;
}
</style>
<p>慕课，即大规模开放在线课程。
<br>是新近涌现出来的一种<strong>在线课程</strong>开发模式。
</p>
例子中，我们可以看到，padding 对 strong 元素垂直方向的布局没有任何影响，只影响了其水平方向的布局。
但我们也可以明显地看到，padding 在垂直方向上，对 strong 元素本身是有效的，这就导致了其背景色与其他元素出现重叠现象。这种重叠效果，和我们使用 box-shadow、 outline 等样式效果一样，即纯视觉重叠，不影响布局。
例子：
<style>
div {
width: 200px;
height: 50px;
outline: dashed;
box-shadow: 5px 5px 2px #999;
}
</style>
<div></div>
优化方式
针对 padding 对元素布局的影响，可以采用以下两种方式进行优化：
1.使用 box-sizing: border-box；，切换内部盒子为 IE 盒子。
例子：
<style>
div {
box-sizing: border-box;
width: 200px;
height: 50px;
padding: 5px;
border: 5px solid red;
}
</style>
<div></div>
2.在元素外面嵌套一层标签，并设置宽度，而该元素宽度使用默认值。
例子：
<style>
div.p_style {
width: 200px;
}
p.c_style {
padding: 5px;
border: 5px solid red;
}
</style>
<div class="p_style">
<p class="c_style">慕课，即大规模开放在线课程。</p>
</div>
Padding 百分比值基于其包含块宽度
首先，padding 不支持负数值，但 padding 支持百分比值。其次，padding 四个方向上的百分比值都是相对于其包含块宽度进行计算的。
例子：
<style>
div {
background: #eee;
width: 200px;
}
p {
padding: 10%;
}
</style>
<div>
<p>hello</p>
</div>
对于内联元素，如果文字内容较多，可能会出现换行的情况，此时，padding 也会换行。但无论如何变化，内联元素的 padding 值同样相对于其包含块的宽度计算。
例子：
<style>
div {
border: 1px solid darkblue;
width: 200px;
}
span {
padding-left: 50%;
padding-right: 50%;
background: rgba(255, 0, 0, 0.3);
}
</style>
<div>
<span>CSS 的很多现象很难解释</span>
</div>
我们知道，内联元素的 padding 在垂直方向上虽然不会影响布局，但是会造成视觉上的重叠，上例中，如果在 span 元素中，加入垂直方向上的 padding 值，就会出现下面例子中的怪异现象：
例子：
<style>
div {
border: 1px solid darkblue;
width: 200px;
}
span {
padding: 50%;
background: #e91e63;
}
</style>
<div>
<span>CSS 的很多现象很难解释</span>
</div>
例子中，我们可以看到，很多文字内容看不到了，我们修改一下背景色的透明度，看看到底是什么遮住了文字：
例子：
<style>
div {
border: 1px solid darkblue;
width: 200px;
}
span {
padding: 50%;
background: rgba(233, 30, 99, 0.4);
}
</style>
<div>
<span>CSS 的很多现象很难解释</span>
</div>
例子中，我们可以看到，是第二行的 padding 遮住了第一行的部分文字，之所以产生这种现象，是因为文字出现换行，导致 padding 也换行：在水平方向上，padding-left 位于第一个行盒子(1)的起始位置，padding-right 位于第二个行盒子的结束位置；而在垂直方向上，padding-top 与 padding-bottom 都有其 50% 包含块的宽度。这就导致第二个行盒子覆盖了第一个行盒子。
*(1)处于一行显示的一个或多个内联盒子称为行盒子。具体参考 深入理解盒子模型
如有错误，欢迎指正，本人不胜感激。