爲什麼inline-block在p和div內部的行爲有所不同？

我的理解是，使用display:inline-block作爲樣式的元素將作爲塊在內部佈置，但在內部的任何容器中都將被視爲內聯元素。這似乎是真的，如果他們在li或div或一堆其他東西;但如果它們在p之內，則不同，原因不明。考慮下面的例子：爲什麼inline-block在p和div內部的行爲有所不同？

<!DOCTYPE html> 
<p>Test1<table style="display:inline-block"><tr><td>x</td></tr></table>Test1</p> 
<div>Test2<table style="display:inline-block"><tr><td>x</td></tr></table>Test2</div> 
<p>Test3<span style="display:inline-block"><table><tr><td>x</td></tr></table></span>Test3</p> 
<div>Test4<span style="display:inline-block"><table><tr><td>x</td></tr></table></span>Test4</div>

這裏的頭兩行有一個表內（分別地）風格display:inline-block一個p和div。接下來的兩個在span內部具有內嵌塊樣式的表格，其也在p和div內。在Test2和Test4，div的情況下，整個事情出現在一條線上（正如我所期望的那樣）。在Test1中，假設內嵌塊元素的前面是換行符，而在Test3中，假設內嵌塊元素的前後都是換行符。

爲什麼？

來源

2017-01-14 blahedo

這是流程元素不屬於p元素的典型案例，它以兩種有趣的方式體現出來。前言：p元素不能包含流程元素，包括table。請參閱spec。相反，這樣的流程元素被放置爲以下的p元素的同胞。所以：

<p><table></table></p>真的<p></p><table></table><p></p>，並
<p><span><table></table></span></p>是真的<p><span></span></p><table></table><p></p>。

你已經知道預期的行爲時，包含的元素是div（雜散</p>結束標籤與在這兩種情況下，一個新的<p>開始標記在Why does a stray </p> end tag generate an empty paragraph?解釋匹配的原因），所以我們將只關注Test1和Test3以及p元素。

在Test1中，內嵌塊元素前面有換行符，因爲它位於p後面的新段落中。（請注意，將table元素顯示爲行內塊實際上只是簡單地使table元素生成一個匿名錶格框來包含其後代 - 這就是爲什麼表格佈局似乎被保留下來的原因。）下面的「Test1」文本會與它一起流動，因爲它與inline-block在同一個匿名段落中。

請注意，通過將雜散的</p>結束標記與自己的開始標記匹配而生成的段落實際上並不包含該文本。這個行爲在我鏈接到上面的同一個問題中描述。

在Test3中，p元素能夠包含內聯塊，因爲它是span元素。但是，p元素在table元素開始的位置結束，因此內聯塊span完全封閉在p元素中，並且不包含table（事實上，它完全爲空）。因此，table出現在它自己的行上，它的佈局完好無損，並且在table之後的另一行上出現以下「Test3」文本，因爲表默認爲塊級別，因此它們不會與任何其他元素出現在同一行上（包括內聯）。

另外請注意，所有的這種行爲是非常確定的（在各自的規範），並同時p元素不能包含一個table元素，一切都在Test1的領導到但不包括</p>結束標籤在技術上是有效的HTML。它的行爲並不像你預期的那樣。

來源

2017-01-14 05:31:33 BoltClock

[更新] ========本答案已公佈||屬於4.0規格===========

The P element represents a paragraph. It cannot contain block-level elements (including P itself).source。

表是塊元素...所以這可能不是確切的答案，但它是您的代碼示例的基本問題。

來源

2017-01-14 05:28:11

從HTML4規範的，和OP的使用HTML5的措辭模型。 –

這是真的。謝謝 –

table元素不允許作爲p的子元素。 p element有一個phrasing content模型，而table不是短語內容。

來源

2017-01-14 05:28:24

p - Paragraph是一個塊級元素，它只能包含內聯元素，儘管它是塊級元素。

欲瞭解更多信息，請參閱p元素here

來源

2017-01-14 05:34:40

不知道如何報價是相關的... – BoltClock

是的，報價是無關緊要，我要編輯它。問題在於Michael Coker提供的措辭模式。 –

爲什麼inline-block在p和div內部的行爲有所不同？

回答

相關問題