介绍

display: inline-block带来了一种创建并排盒子的新方法，这些盒子根据包含元素中的可用空间正确折叠和包裹。它使以前使用浮动完成的布局更容易创建。不再需要清除浮点数。

与display: inline相比，主要区别在于inline-block允许在元素上设置宽度和高度。此外，使用display: inline，不考虑顶部和底部边距和填充，而使用display: inline-block。

现在，display: inline-block和display: block之间的区别在于，使用display: block，在元素之后发生换行符，因此块元素不会位于其他元素旁边。以下是一些视觉示例：

显示：内联

请注意这里的宽度和高度是如何不被考虑的，以及如何存在顶部和底部填充，但在上下线上重叠。

span.box {
  display: inline; /* the default for span */
  width: 100px;
  height: 160px;
  padding: 18px;
}

显示：内联块

这里尊重了宽度、高度和填充，但元素的两个副本仍然可以并排放置。

span.box {
  display: inline-block;
  width: 100px;
  height: 160px;
  padding: 18px;
}

显示：块

在这里，一切都受到尊重，但元素不会并排放置。

span.box {
  display: block;
  width: 100px;
  height: 160px;
  padding: 18px;
}