Html 如果我将类添加到span标记而不是div标记，为什么会有区别？

当我在div标记中使用css类时，它似乎忽略了css中的内容

.centered {
  background-color: red;
  padding: 5px 20px 5px 20px;
}

为什么会这样？有什么区别

---

这是因为span是内联元素，div是块元素

要查看差异，可以通过执行以下操作将跨度设置为块元素：

.centered {
  display: block
}

是块级元素，默认情况下占可用宽度的100%

是一个内联元素，它只占用显示其内容所需的最小宽度

有一个很好的例子解释了这一点

---

快乐编码：）

谢谢您宝贵的回答！感谢您花时间回答，非常有用！

<div style="text-align:center">
    <span class="centered">I am centered with bg around me</span>
</div>

.centered {
  display: block
}