浅谈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%
实现了一个自适应的正方形。