CSS显示：内联与内联块[重复]

Posted 2023-03-06

【中文标题】CSS显示：内联与内联块[重复]

【英文标题】：CSS display: inline vs inline-block [duplicate]

【发布时间】：2012-02-29 16:20:39

【问题描述】：

在 CSS 中，display 的值可以是 inline 和 inline-block。谁能详细解释一下inline和inline-block的区别？

我到处搜索，最详细的解释告诉我inline-block 被放置为inline，但行为类似于block。但它并没有解释“行为作为一个块”的确切含义。有什么特别之处吗？

一个例子会是一个更好的答案。谢谢。

【问题讨论】：

CSS 不是标记语言，display 不是标签。

在这里查看.. display in CSS Versions

display: inline-block 在 Firefox、Safari、Google Chrome 和 IE 8 中可以正常渲染。但是，对于旧版本的 Internet Explorer，我们需要触发 hasLayout 并使用一些 hack 来设置显示为内联。 （例如，请参阅bit.ly/16cxMXj。）

【参考方案1】：

内联元素：

尊重左右边距和内边距，但不上下 不能设置宽度和高度 允许其他元素位于它们的左右两侧。 请参阅此here 的非常重要的附注。

块元素：

尊重所有这些 在块元素后强制换行 如果未定义宽度，则获取全宽

行内块元素：

允许其他元素位于其左右两侧 尊重上下边距和内边距 尊重高度和宽度

来自W3Schools：

内联元素之前或之后没有换行符，并且它允许其旁边的 html 元素。

块元素的上下都有一些空白，并且不允许在其旁边有任何 HTML 元素。

inline-block 元素作为 inline 元素放置（与相邻内容在同一行），但它的行为类似于块元素。

当你想象它时，它看起来像这样：

图片取自this page，其中也谈到了这个话题。

【讨论】：

我认为您没有完全阅读我的问题。我在问题中提到我知道它表现为块元素。我在问“作为块元素的行为”是什么意思。

如果你真的尝试过，它实际上允许它旁边的元素。

我是 html 新手。块元素不容忍它旁边的任何元素。但是如果我们给下一个元素“内联”，那么它就会出现在我们的块元素旁边。所以，块元素容忍与否没有意义。是否要与前一个元素保持一致取决于下一个元素。???

我知道它很旧，但我会帮忙：“表现得像块元素”是非常糟糕的措辞。我将尝试进一步澄清： inline：可以在同一行上显示它之前或之后的内容。块：需要自己的行，周围有空格。 inline-block：可以在它之前或之后有元素，但它周围有空格。所以 inline-block 不是“内联但表现得像块”，它是两者的结合，正如名字所暗示的那样：在同一行，但有边界。有意义吗？

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