浅谈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;
width: 100%;
padding-bottom: 100%;
background: #cccccc;
}效果如下：
可以看到，通过padding-bottom: 100%实现了一个自适应的正方形。
内容来源于网络如有侵权请私信删除
- 还没有人评论，欢迎说说您的想法！
客服
