在CSS中,display可以有inline和inline-block的值。有人能详细解释内联和内联块之间的区别吗?
我到处搜索,最详细的解释告诉我内联块被放置为内联,但行为像块。但它并没有解释“行为像块”到底是什么意思。它有什么特别之处吗?
举个例子会是更好的答案。谢谢。
在CSS中,display可以有inline和inline-block的值。有人能详细解释内联和内联块之间的区别吗?
我到处搜索,最详细的解释告诉我内联块被放置为内联,但行为像块。但它并没有解释“行为像块”到底是什么意思。它有什么特别之处吗?
举个例子会是更好的答案。谢谢。
内联元素:
尊重左右边距和填充,但不尊重上下边距 不能设置宽度和高度 允许其他元素位于它们的左边和右边。 这里有非常重要的边注。
块元素:
尊重所有这些 在block元素之后强制换行 如果宽度未定义,则获取全宽度
Inline-block元素:
允许其他元素位于它们的左边和右边 尊重上下边距和填充 尊重高度和宽度
从W3Schools:
内联元素在其前后没有换行符,并且允许其旁边有HTML元素。 块元素的上面和下面都有一些空白,并且不允许它旁边有任何HTML元素。 内联块元素作为内联元素放置(与相邻内容在同一行上),但它的行为是块元素。
当你把它形象化时,它看起来是这样的:
图片取自本页,该页也讨论了更多关于这个主题的内容。