CSS显示：内联VS内联块

412

可能重复：
What is the difference between display: inline and display: inline-block?CSS显示：内联VS内联块

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

我到处搜索，最详细的解释告诉我inline-block被放置为inline，但行为如block。但它并不能解释究竟“表现为块”的含义。它有什么特殊功能吗？

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

来源

2012-02-08 user926958

+26

CSS不是标记语言，'display'不是标签。 – BoltClock 2012-02-08 08:24:54

cek here .. [在CSS版本中显示]（http://webdesign.about.com/od/styleproperties/p/blspdisplay.htm） – Fredy 2012-02-08 08:30:11

display：inline-block在Firefox，Safari，Google Chrome和IE 8.但是，对于旧版本的Internet Explorer，我们需要触发hasLayout，并使用一些小技巧将显示设置为内联。（例如，请参阅http://bit.ly/16cxMXj。） – Ace 2013-04-29 14:49:18

844

内联元素：

对于左&右边距和填充，但是不顶部&底部
不能具有宽度和高度设置
允许其它元件坐到其左和右。
看到这个here非常重要的旁注。

块元素：

对于所有那些
力的块元素之后换行符

直列块元素：

允许其它元件坐在他们的左右
尊重顶部&底部边距和填充
对于高度和宽度

从W3Schools：

内联元件具有之前或之后无线断裂，并且它容忍HTML元素旁边。

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

内联块元素作为内联元素放置（与相邻内容位于同一行），但其行为与块元素相同。

当你想象这一点，它看起来像这样：

CSS block vs inline vs inline-block

的图像从this page，其中也谈到了一些更多关于这个问题采取的。

来源

2012-02-08 08:30:06 Oldskool

我认为你没有完全阅读我的问题。我在提到的问题中提到，我知道它表现为块元素。我在问什么“表现为块元素”的含义。 – user926958 2012-02-08 08:57:29

@ user926958这意味着它的上下有一些空格，并且不允许旁边有任何HTML元素。 – Oldskool 2012-02-08 09:04:52

如果你真的尝试它，它实际上允许旁边的元素。 – user926958 2012-02-08 09:16:21

CSS显示：内联VS内联块

回答

相关问题