CSS 中的 display: inline 和 display: inline-block 有什么区别？

在 CSS 中，有两种显示类型可以用于元素：display: inline 和 display: inline-block。这两种类型的主要区别是它们如何处理元素的盒模型和布局行为。

display: inline

display: inline 让元素以行内元素的方式显示。例如，<span> 通常默认为 display: inline。它们在行内排列，忽略 width 和 height 属性。此外，它们没有左右 margin，上下 margin 可以设置，但不同浏览器表现略有差别。

span {
  display: inline;
}

display: inline-block

display: inline-block 让元素也以行内元素的方式显示，但是具有块级元素的特点。即元素保留着块级元素的盒模型，因此可以设置 width、height、padding、margin 等属性。同时，多个 display: inline-block 的元素可以在同一行排列。

span {
  display: inline-block;
  width: 100px;
  height: 50px;
  padding: 10px;
  margin: 10px;
}

这里的 display: inline-block 定义了 <span> 的宽为 100px，高为 50px，并且给 padding 和 margin 追加了一些样式。这些样式都会被应用到 <span> 元素上，且能进行行内排列。

总结

总而言之，display: inline 和 display: inline-block 的区别在于，前者完全按照文本的排列方式排列元素，而后者则仍然保持着块级元素的特点，可以设置大小和间距等属性，并在同一行上显示。针对不同的需求，开发者应该选择合适的 display 属性值。