CSS显示: inline vs inline-block

Question

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

我到处寻找，最详细的解释告诉我，inline-block被放在inline上，但行为像block。但它并没有确切地解释“行为像块”是什么意思。有什么特别的功能吗？

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

Answer 1

内联元素：

1. 尊重左边距和右边距和填充，但不是 top & bottom
2. cannot有宽度和高度设置
3. 允许其他元素坐在它们的左边和右边。
4. 请参阅此页面上非常重要的附注

块元素：

如果element

• acquires

未定义宽度，则在块后强制换行符full-width

内联块元素：

高度和宽度允许其他元素位于其左侧，并允许顶部和底部边距和宽度与宽度保持一致( right

• respect padding

• respect

来自W3Schools

• 内联元素前后没有换行符，并且允许在其旁边使用HTML元素。

• 块元素的上下都有一些空格，不允许在它旁边有任何

元素。

• 内联块元素作为内联元素放置(与相邻内容在同一行上)，但它的行为类似于块元素。

当您将其可视化时，它看起来是这样的：

​

​

这张图片来自this page，它也谈到了更多关于这个主题的内容。