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內聯塊

回答

相關問題