CSS显示：内联vs内联块

Question

  

可能重复：
  What is the difference between display: inline and display: inline-block?

在CSS中，display的值可以为inline和inline-block。任何人都可以详细解释inline和inline-block之间的区别吗？

我到处搜索，最详细的解释告诉我inline-block被放置为inline，但行为类似于block。但它没有解释究竟“表现为块”的含义。这有什么特别之处吗？

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

Answer 1

内联元素：

1. 尊重左派＆amp;右边距和填充，但不 top＆amp;底
2. 无法设置宽度和高度
3. 允许其他元素左右坐着。
4. 请参阅有关此here的非常重要的附注。

块元素：

1. 尊重所有这些
2. 在块元素
之后强制换行
3. 获取未定义宽度的全宽

内联块元素：

1. 允许其他元素左右坐着
2. 尊重顶级＆amp;底部边距和填充
3. 尊重身高和宽度

来自W3Schools：

  

  

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

  

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

  

• 内联块元素被放置为内联元素（与相邻内容在同一行上），但它表现为块元素。

  

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



图像取自this page，其中还有关于此主题的更多内容。