使用 Padding 应该注意的地方

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)处于一行显示的一个或多个内联盒子称为行盒子。具体参考 深入理解盒子模型

---

如有错误，欢迎指正，本人不胜感激。