浅谈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;
}

效果如下：

aaarticlea/png;base64,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" alt="avatar">

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

2.不允许使用负值

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

可能的值

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

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

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

效果如下：

aaarticlea/png;base64,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" alt="avatar">

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