CSS _ CSS 内边距

CSS 内边距

在CSS中padding属性被用来定义元素的内边距，即该元素内容与边框之间的空白间距。通过CSS进行设置，不仅能整体控制内边距，还能分别设置上、下、左、右方向的内边距。

通过如下属性可以分别定义上、下、左、右方向的内边距：

内边距属性的取值有如下方式：

案例如下：

div {
    padding-top: 150px;
    padding-right: 30px;
    padding-bottom: 50px;
    padding-left: 80px;
}

洒家又来了，洒家要只用padding属性来分别设置四方向的上下左右。（本节下文所述边距都特指内边距）

如果padding属性有4个值 - padding:25px 50px 75px 100px;（上边距为25px，右边距为50px，下边距为75px，左边距为100px。）

div {
    padding: 25px 50px 75px 100px;
}

如果padding属性有3个值 - padding:25px 50px 75px;（上边距为25px，右边距和左边距都为50px，下边距为75px。）

div {
    padding: 25px 50px 75px;
}

如果padding属性有2个值 - padding:25px 50px;（上边距和下边距都为25px，右边距和左边距都为50px。）

div {
    padding: 25px 50px;
}

如果padding属性有1个值 - padding:25px;（四边的边距都为25px）

div {
    padding: 25px;
}

元素的padding属性和width属性比较纠缠，一般默认情况下，如果某个已经设置了具体宽度属性的元素，则计算实际元素宽度时，padding的内边距会被加上，最终该元素表现的宽度是width属性设置的值加上padding属性设置的左右内边距。

如下例所示，div元素的宽度值虽然被设置成300px，但是实际上其表现出的宽度应该是350px，即300px宽度，加上25px左边距，再加上25px右边距。

div {
    width: 300px;
    padding: 25px;
}

但是，如此元素宽度就很难限定，因此，大多情况下更佳的实践方式是把box-sizing这个值设定成border-box，这样就可以保证内边距不会对元素宽度产生影响。

div {
    width: 300px;
    padding: 25px;
    box-sizing: border-box;
}