CSS显示属性：inline vs inline-block

Question

在CSS中，display 可以使用 inline 和 inline-block 值。有人可以详细解释一下 inline 和 inline-block 之间的区别吗？

我到处搜索，最详细的解释告诉我inline-block 被视为 inline，但表现得像 block。但是它没有解释“表现为块级元素”的具体含义。这是否有任何特殊功能？

一个示例将是更好的答案。谢谢。

- user926958

---

CSS不是一种标记语言，display也不是一个标签。 - BoltClock

这是链接到关于CSS版本中"display"属性解释的页面。 - Fredy

display: inline-block 在 Firefox、Safari、Google Chrome 和 IE 8 中都可以正常渲染。然而，在旧版的 Internet Explorer 中，我们需要触发 hasLayout，并使用一些小技巧将显示设置为 inline。（请参见 http://bit.ly/16cxMXj 的示例。） - Ace

Answer 1

内联元素：

1. 保留左右边距和填充，但不包括顶部和底部
2. 不能设置宽度和高度
3. 允许其他元素位于它们的左侧和右侧。
4. 关于此问题，可以在这里看到一些非常重要的注释。

块级元素：

1. 遵循所有上述规则
2. 在块级元素之后强制换行
3. 如果未定义宽度，则获得全宽度

内联块级元素：

1. 允许其他元素位于其左侧和右侧
2. 保留顶部和底部的边距和填充
3. 保留高度和宽度

来自W3Schools：

• 内联元素前后没有换行，并且容忍相邻的HTML元素。

• 块级元素上下有一些空白，并且不容忍任何相邻的HTML元素。

• 内联块级元素被放置在内联元素中（与相邻内容在同一行上），但其行为类似于块级元素。

可视化结果如下图所示：

图片来自这个页面，该页面还详细介绍了这个主题。

- Oldskool

---

我认为你没有完全阅读我的问题。我在问题中提到我知道它会表现为块级元素。我想知道“表现为块级元素”的意思是什么。 - user926958

我对HTML还很陌生。块级元素不允许在其旁边放置任何元素。但是，如果我们将下一个元素设置为“内联”，那么它将出现在我们的块级元素旁边。因此，块级元素是否容忍没有意义。这取决于下一个元素是否想与前一个元素排成一行。 - vivek.m

“表现得像块级元素”这种说法非常不恰当。我会尽力进一步澄清：行内元素：可以在同一行上显示其前后的内容。块级元素：需要有自己的一行，并在其周围有空白。行内块级元素：可以在其前后具有元素，但是其周围有空白。所以行内块级元素并不是“行内元素但表现得像块级元素”，它是两者的组合，正如名称所示：在同一行上，但具有边框。明白了吗？ - vbullinger

一个重要的区别需要注意，那就是 inline 元素可以从一行开始并延续到下一行，而 inline-block 元素将整个块作为一个整体换行。 - herman

内联元素也可以设置上下内边距，但效果可能不尽如人意。请确认！ - tomwang1013