1.带着问题出发
如果设置盒模型的box-sizing为border-box的话，那么元素的宽度就一定是设置的width吗？不是的，比如当padding设置的过大的时候，如下所示：
1
2
3
4
5
6
7
8
9
| <div class="box"></div>
<style type="text/css">
.box {
width: 300px;
height: 300px;
background: yellow;
padding: 500px;
}
</style>
|
对于上面这种情况，box的宽度便是1000px。
判断下面这段代码的输出：
1
2
3
4
5
6
7
8
9
10
11
|
<span class="sp"></span>
<div class="box"></div>
<script type="text/javascript">
window.onload = function () {
let box = document.querySelector('.box');
let sp = document.querySelector('.sp');
console.log('box', box.clientWidth, box.clientHeight);
console.log('sp', sp.clientWidth, sp.clientHeight);
}
</script>
|
输出结果为box,1000,1000；和sp,0,0。对于内联元素来说，它的可视宽度和可视高度永远是0。
padding是否会影响内联元素垂直方向的行为？就表现上来说，你会发现设置padding并没有改变上下两行之间的间距，这给我们造成的错觉就是padding不会改变上下两行内容之间的间距。对于内联元素来说，垂直方向的行为完全受line-height和vertical-align的影响。对应到这里就是说内联元素的padding的确不对位置产生影响效果。尽管设置padding对内联元素垂直方向的定位不会产生什么影响，但是对元素的尺寸影响还是在的。
可以利用内联元素的padding效果来做些什么？
1).增大点击面积，既然他不会影响布局，但是又会影响尺寸的话，那么把padding设置的足够大可以很好地增大点击面积。
2).实现垂直分隔符的效果，代码如下所示：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
| <a href="#">登录</a>
<a href="#">注册</a>
<style type="text/css">
a+a:before {
content: '';
font-size: 0;
padding: 9px 1px 2px;
margin: 0 6px;
border-left: 1px solid grey;
}
</style>
```html
### 2.padding非百分比值
**padding属性的值也能够使用百分比来进行计算，但是百分比值无论是设置水平方向的padding还是设置垂直方向的padding都是相对于元素自己的宽度进行计算。**
可以使用块元素的padding相对单位为自身宽度来实现一些什么效果呢？答案是可以用来实现适配良好的头图效果，如下所示：
```html
<div class="box">
<img src="sthPath" alt="头图" />
</div>
<style type="text/css">
.box {
position: relative;
padding: 10% 50%;
}
.box > img {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
</style>
|
上面的关键点是.box设置了相对定位，然后根据padding: 10% 50%设置了1:5长宽比（是的position: relative，默认宽度上的表现类似于box-sizing: border-box;width: 100%，默认高度则是默认为0)。
消除幽灵空白节点，设置font-size为0。
3.利用padding效果实现一个菜单按钮
1
2
3
4
5
6
7
8
9
10
11
12
13
| <i class="menu"></i>
<style type="text/css">
.menu {
display: inline-block;
width: 60px;
height: 10px;
padding: 15px 0;
border-top: 10px solid grey;
border-bottom: 10px solid grey;
background: grey;
background-clip: content-box;
}
</style>
|
其中background-clip: content-box的意思是指背景只是应用在content-box上面。
4.利用padding制作一个镂空圆点
1
2
3
4
5
6
7
8
9
10
11
12
| <div class="dot"></div>
<style type="text/css">
.dot {
width: 80px;
height: 80px;
padding: 10px;
border: 10px solid grey;
border-radius: 50%;
background: grey;
background-clip: content-box;
}
</style>
|