Question

我的理解是，使用display:inline-block样式化的元素将在内部作为块布局，但在其内部的任何容器中都被视为内联元素。如果他们在li或div或其他一些东西里面，那似乎是真的;但如果他们在p里面，那就不同了，原因我不明白。请考虑以下示例：

<!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中，所谓的内联块元素前面和后面都有一个换行符。

为什么？

Answer 1

这是不属于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>。

（在Why does a stray </p> end tag generate an empty paragraph?）

</p>

<p>

当包含元素为div时，您已经知道了预期的行为，因此我们只关注具有p元素的Test1和Test3。

在Test1中，内联块元素前面有一个换行符，因为它位于p之后的新段落中。（请注意，将table元素显示为内联块实际上只会导致table元素生成一个包含其后代的匿名表框 - 这就是表格布局似乎被保留的原因。）以下＆＃34;测试1＆＃34;文本随之流动，因为它位于同一个匿名段落中，与内联块位于同一行。

请注意，通过将迷路</p>结束标记与其自己的开始标记匹配而生成的段落实际上并不包含该文本。我在上面链接的同一问题中描述了这种行为。

在Test3中，p元素能够包含内联块，因为它是span元素。但是，p元素在table元素开始的位置结束，因此内联块span完全包含在p元素中，并且不包含{{1 （事实上，它完全是空的）。所以table出现在它自己的行上，它的布局完好无损，以及下面的＆＃34; Test3＆＃34;文本出现在table之后的另一行上，因为默认情况下表是块级的，因此永远不会出现在与任何其他元素（包括内联）相同的行上。

另请注意，所有这些行为都非常明确（在相应的规范中），并且虽然table元素不能包含p元素，但Test1中的所有内容都会导致但不是包括table结束标记在技术上是有效的HTML。它没有像你预期的那样表现。

Answer 2

table元素不允许作为p的子元素。 p element有一个phrasing content模型，table不是短语内容。

Answer 3

[更新] ========这个答案已经过时了||属于4.0规格===========

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

表是一个块元素......所以这可能不是准确的答案，但它是代码示例的基本问题。

Answer 4

aabbbcccc是块级元素，它只能包含内联元素，尽管它是块级元素。

有关详细信息，请参阅p - Paragraph元素here

的措辞模型

为什么内联块在div内部的行为不同？

4 个答案: