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