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

本文翻译自：CSS display: inline vs inline-block [duplicate]

Possible Duplicate: 可能重复：
What is the difference between display: inline and display: inline-block? display：inline和display：inline-block有什么区别？

In CSS, display can have values of inline and inline-block . 在CSS中， display可以具有inline和inline-block 。 Can anyone explain in detail the difference between inline and inline-block ? 任何人都可以详细解释inline和inline-block之间的区别吗？

I searched everywhere, the most detailed explanation tells me inline-block is placed as inline , but behaves like block . 我到处搜索，最详细的解释告诉我inline-block被放置为inline ，但表现得像block 。 But it does not explain what exactly "behave as a block" means. 但它没有解释究竟“表现为块”的含义。 Is it any special feature? 这有什么特别之处吗？

An example would be an even better answer. 一个例子是更好的答案。 Thanks. 谢谢。

---

#1楼

参考：https://stackoom.com/question/cYgk/CSS显示-内联vs内联块-重复

---

#2楼

Inline elements: 内联元素：

1. respect left & right margins and padding, but not top & bottom 尊重左右边距和填充，但不是顶部和底部
2. cannot have 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 . 在这里看到非常重要的附注。

Block elements: 块元素：

1. respect all of those 尊重所有这些
2. force a line break after the block element 在块元素后强制换行
3. acquires full-width if width not defined 如果未定义宽度，则获取全宽

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 尊重高度和宽度

From W3Schools : 来自W3Schools ：

• An inline element has no line break before or after it, and it tolerates HTML elements next to it. 内联元素在它之前或之后没有换行符，并且它允许旁边的HTML元素。

• A block element has some whitespace above and below it and does not tolerate any HTML elements next to it. 块元素在其上方和下方具有一些空格，并且不允许其旁边的任何HTML元素。

• An inline-block element is placed as an inline element (on the same line as adjacent content), but it behaves as a block element. 内联块元素被放置为内联元素（与相邻内容在同一行上），但它表现为块元素。

When you visualize this, it looks like this: 当您想象这个时，它看起来像这样：

The image is taken from this page , which also talks some more about this subject. 图像来自此页面 ， 该页面还讨论了有关此主题的更多内容。