为什么内联块在 p 和 div 内的行为不同？答案

【问题标题】：Why does inline-block behave differently inside a p vs inside a div?为什么内联块在 p 和 div 内的行为不同？
【发布时间】：2017-05-29 13:25:12
【问题描述】：

我的理解是，带有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>

这里的前两行在p 和div 内部有一个样式为display:inline-block 的表格。接下来的两个表在span 内具有内联块样式，同样在p 和div 内。在 Test2 和 Test4 中，div 的情况下，整个事情都显示在一行上（正如我对所有这些情况的期望）。在 Test1 中，所谓的 inline-block 元素在布局之前有一个换行符，而在 Test3 中，所谓的 inline-block 元素在布局之前和之后都有一个换行符。

为什么？

【问题讨论】：

标签： html css

【解决方案1】：

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

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

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

【讨论】：

这是来自 html4 规范，而 OP 使用的是 html5。
确实如此。谢谢

【解决方案2】：

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

【讨论】：

【解决方案3】：

这是流元素不属于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 中，inline-block 元素前面有一个换行符，因为它位于p 之后的新段落中。（请注意，将table 元素显示为内联块实际上只会导致table 元素生成一个匿名表格框以包含其后代——这就是表格布局似乎被保留的原因。）以下“Test1”文本沿着它流动，因为它在同一个匿名段落中，并且与内联块在同一行。

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

在 Test3 中，p 元素能够包含内联块，因为它是 span 元素。然而，p 元素在table 元素开始的地方结束，因此内联块span 完全包含在p 元素中并且不包含table（实际上，它完全是空的） .所以table 出现在它自己的行上，它的布局完好无损，下面的“Test3”文本出现在table 之后的另一行上，因为表默认是块级的，因此永远不会出现在同一行与任何其他元素（包括内联）一样。

还请注意，所有这些行为都是非常明确的（在各自的规范中），虽然 p 元素不能包含 table 元素，但 Test1 中的所有内容都指向但不包括 @987654350 @end 标记在技术上是有效的 HTML。它只是不像您预期的那样运行。

【讨论】：

【解决方案4】：

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

更多信息，请参考p元素here的短语模型

【讨论】：

是的，引用无关紧要，对不起，我要编辑它。问题在于 Michael Coker 提供的措辞模型。