浅谈padding

浅谈padding

padding是CSS盒子模型的一部分，代表盒子模型的内边距。

用法

padding属性有四个值，分别代表上、右、下、左的内边距。

.box {
  padding: 10px 5px 15px 20px;
}

此时，.box的内边距为：

• 上内边距：10px
• 右内边距：5px
• 下内边距：15px
• 左内边距：20px

简写

padding属性的值可以简写，按照值的数量可以分为三种情况：

1.单个值

.box {
  padding: 10px;
}

此时，.box的内边距为：

• 上内边距：10px
• 右内边距：10px
• 下内边距：10px
• 左内边距：10px

2.两个值

.box {
  padding: 10px 5px;
}

此时，.box的内边距为：

• 上内边距：10px
• 右内边距：5px
• 下内边距：10px
• 左内边距：5px

3.三个值（重点）

.box {
  padding: 10px 5px 15px;
}

此时，.box的内边距为：

• 上内边距：10px
• 右内边距：5px
• 下内边距：15px
• 左内边距：5px

tips：实际使用时，大多数人都会使用单个值、两个值、四个值的写法，三个值的写法常常被忽略，所以需要重点了解三个值的简写写法。

特性

1.行内元素设置的内边距不会影响行高计算

当对行内元素设置内边距时，内边距不会影响内联元素的行高，但是会撑开背景。

<span class="text">我是行内元素</span>
<div class="text-bottom">朕的背景！！！</div>

span {
    padding: 10px;
    background: #cccccc;
}

.text-bottom {
    height: 200px;
    background: #000;
}

效果如下：

可以发现：行高并没有变化，背景按内边距撑开的面积显示，细心的话可以发现，背景延伸到了其他行，并发生了重叠，并没有挤开其他行，这也进一步说明了行高并没有改变。

2.不允许使用负值

padding不像margin可以使用负值，因为，margin再怎么用，也不会影响盒模型的宽度、高度，而padding身为盒模型的内边距，会直接影响盒模型的宽度、高度。并且，padding设为负值并没有意义，直接修改content一样可以达到效果。

可能的值

值	描述
auto	浏览器计算内边距
length	规定以具体单位计的内边距值，比如像素、厘米等。默认值是 0px
%	规定基于父元素的宽度的百分比的内边距
inherit	规定应该从父元素继承内边距

tips：padding常用的写法是使用length，比如padding: 10px。但是，有时使用百分比可以实现一些骚操作，比如实现一个自适应的正方形：

.box {
    float: left;
     100%;
    padding-bottom: 100%;
    background: #cccccc;
}

效果如下：

可以看到，通过padding-bottom: 100%实现了一个自适应的正方形。