CSS 显示：内联 vs 内联块

CSS display: inline vs inline-block

提问by user926958

In CSS, displaycan have values of inlineand inline-block. Can anyone explain in detail the difference between inlineand inline-block?

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

I searched everywhere, the most detailed explanation tells me inline-blockis placed as inline, but behaves like block. But it does not explain what exactly "behave as a block" means. Is it any special feature?

我到处搜索，最详细的解释告诉我inline-block放置为inline，但表现得像block。但它并没有解释“表现得像块”究竟是什么意思。它有什么特别之处吗？

An example would be an even better answer. Thanks.

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

回答by Oldskool

Inline elements:

内联元素：

1. respect left & right margins and padding, but nottop & bottom
2. cannothave a width and height set
3. allow other elements to sit to their left and right.
4. see very important side notes on this here.

1. 尊重左右边距和填充，但不尊重顶部和底部
2. 不能设置宽度和高度
3. 允许其他元素坐在他们的左右。
4. 在这里查看非常重要的附注。

Block elements:

块元素：

1. respect all of those
2. force a line break after the block element
3. acquires full-width if width not defined

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

Inline-block elements:

内联块元素：

1. allow other elements to sit to their left and right
2. respect top & bottom margins and padding
3. respect height and width

1. 允许其他元素坐在他们的左右
2. 尊重顶部和底部边距和填充
3. 尊重高度和宽度

From W3Schools:

来自W3Schools：

• An inline element has no line break before or after it, and it tolerates HTML elements next to it.

• A block element has some whitespace above and below it and does not tolerate any HTML elements next to it.

• An inline-block element is placed as an inline element (on the same line as adjacent content), but it behaves as a block element.

• 内联元素之前或之后都没有换行符，并且可以容忍旁边的 HTML 元素。

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

• 内联块元素作为内联元素放置（与相邻内容在同一行），但它的行为与块元素相同。

When you visualize this, it looks like this:

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

The image is taken from this page, which also talks some more about this subject.

该图像取自此页面，该页面还讨论了有关此主题的更多信息。