padding和width&height设置文本后元素实际宽高的区别
我们分别设置 padding 和 width&height为40px
.box1{
background:red;
padding: 40px;
display:inline;
}
.box2{
background:blue;
width:40px;
height:40px;
}
结果如下
c2ugt8xsmPYKFe4
分别看一下他们的结构
1. 使用padding设置元素的宽高
padding: 40px;
X32xQwBsGrZTtCU
真正的元素宽高 = 文本的宽高 + padding的宽高
2. 使用width,height设置元素的宽高
width:40px;
height:40px;
PINdphMk4ZfncQE
这里
真实的元素宽高 = 自己定义的元素宽高
什么时候使用padding什么时候使用width&height呢？
在设置一个标准的圆形时候，不适合使用padding。因为设置圆形的方法如下
border-radius: 50%;
由于使用padding得到的元素真实宽高随着文本的长度会不一样。所以设置半径为50%的时候会产生扭曲。如图所示，而设置了宽高的则不会有这种现象
mJLvfCN2xZbXShR
使用padding的好处是什么呢？
使用padding的话。文本会自动剧中。所以不需要对文本进行设置。而使用width和height，文本默认在左上角。需要自己继续设置样式
c2ugt8xsmPYKFe4
如何使用width&height的时候也可以让文本居中呢？
使用flex布局就可以让文本进行居中了
.box2{
background:blue;
width:40px;
height:40px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
如图所示
rEuIAi19Xfx2KC6
完整代码codepen
