使用 Padding 应该注意的地方

如果是块级元素，padding 会改变元素水平和垂直方向的布局尺寸

例子：

    div {
 background: #ccc;
 width: 50px;
 height: 50px;
 padding: 5px;
    }

例子中，我们可以看到，div 元素的宽高均为 50px，但其实际占据的空间却是 60px，原因就是 padding 影响了元素水平和垂直方向的布局。

如果是内联元素，padding 只会改变元素水平方向的布局尺寸

例子：

    strong {
 background: #eee;
 opacity: .8;
 padding: 10px;
    }


慕课，即大规模开放在线课程。
    
是新近涌现出来的一种在线课程开发模式。

例子中，我们可以看到，padding 对 strong 元素垂直方向的布局没有任何影响，只影响了其水平方向的布局。
但我们也可以明显地看到，padding 在垂直方向上，对 strong 元素本身是有效的，这就导致了其背景色与其他元素出现重叠现象。这种重叠效果，和我们使用 box-shadow、 outline 等样式效果一样，即纯视觉重叠，不影响布局。

例子：

    div {
 width: 200px;
 height: 50px;
 outline: dashed;
 box-shadow: 5px 5px 2px #999;
    }

优化方式

针对 padding 对元素布局的影响，可以采用以下两种方式进行优化：

1.使用 box-sizing: border-box；，切换内部盒子为 IE 盒子。

例子：

    div {
 box-sizing: border-box;
 width: 200px;
 height: 50px;
 padding: 5px;
 border: 5px solid red;
    }

2.在元素外面嵌套一层标签，并设置宽度，而该元素宽度使用默认值。

例子：

    div.p_style {
 width: 200px;
    }
    
    p.c_style {
 padding: 5px;
 border: 5px solid red;
    }



    
慕课，即大规模开放在线课程。

首先，padding 不支持负数值，但 padding 支持百分比值。其次，padding 四个方向上的百分比值都是相对于其包含块宽度进行计算的。

例子：

    div {
 background: #eee;
 width: 200px;
    }
    
    p {
 padding: 10%;
    }



    
hello

对于内联元素，如果文字内容较多，可能会出现换行的情况，此时，padding 也会换行。但无论如何变化，内联元素的 padding 值同样相对于其包含块的宽度计算。

例子：

    div {
 border: 1px solid darkblue;
 width: 200px;
    }
    
    span {
 padding-left: 50%;
 padding-right: 50%;
 background: rgba(255, 0, 0, 0.3);
    }



    CSS 的很多现象很难解释

我们知道，内联元素的 padding 在垂直方向上虽然不会影响布局，但是会造成视觉上的重叠，上例中，如果在 span 元素中，加入垂直方向上的 padding 值，就会出现下面例子中的怪异现象：

例子：

    div {
 border: 1px solid darkblue;
 width: 200px;
    }
    
    span {
 padding: 50%;
 background: #e91e63;
    }



    CSS 的很多现象很难解释

例子中，我们可以看到，很多文字内容看不到了，我们修改一下背景色的透明度，看看到底是什么遮住了文字：

例子：

    div {
 border: 1px solid darkblue;
 width: 200px;
    }
    
    span {
 padding: 50%;
 background: rgba(233, 30, 99, 0.4);
    }



    CSS 的很多现象很难解释

例子中，我们可以看到，是第二行的 padding 遮住了第一行的部分文字，之所以产生这种现象，是因为文字出现换行，导致 padding 也换行：在水平方向上，padding-left 位于第一个行盒子(1)的起始位置，padding-right 位于第二个行盒子的结束位置；而在垂直方向上，padding-top 与 padding-bottom 都有其 50% 包含块的宽度。这就导致第二个行盒子覆盖了第一个行盒子。

*(1)处于一行显示的一个或多个内联盒子称为行盒子。具体参考 深入理解盒子模型

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