我的理解是，使用 display:inline-block 样式的元素将在内部作为 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 的表格。接下来的两个在具有内联 block 样式的 span 中包含表格，同样在 p 和 div 中。在 Test2 和 Test4 中，div 情况下，整个事情都显示在一行中(正如我所期望的那样)。在 Test1 中，假设的 inline-block 元素在换行符之前放置，而在 Test3 中，假设的 inline-block 元素前后都有换行符。
为什么？
最佳答案
这是流元素不属于 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 时，您已经知道预期的行为, 所以我们只关注 Test1 和 Test3 与 p元素。
在 Test1 中，内联 block 元素前面有换行符，因为它位于 p 之后的新段落中。 . (请注意，将 table 元素显示为行内 block 实际上只会导致该 table 元素生成一个匿名表格框以包含其后代——这就是表格布局似乎被保留的原因。)以下“Test1”文本与它一起流动，因为它与内联 block 位于同一个匿名段落和同一行。
注意匹配杂散产生的段落</p>带有自己的开始标签的结束标签实际上并不包含该文本。我在上面链接的同一个问题中描述了这种行为。
在测试 3 中，p元素能够包含行内 block ，因为它是 span元素。然而，p元素在 table 处结束元素开始，所以内联 block span完全封闭在 p 内元素且不包含 table (实际上，它完全是空的)。所以 table出现在自己的行中，其布局完好无损，并且以下“Test3”文本出现在 table 之后的另一行中，因为默认情况下表是 block 级的，因此永远不会与任何其他元素(包括内联元素)出现在同一行上。
另请注意，所有这些行为都非常明确(在各自的规范中)，并且虽然 p元素不能包含 table元素，Test1 中导致但不包括 </p> 的所有内容结束标记在技术上是有效的 HTML。它的行为并不像您预期的那样。
关于html - 为什么内联 block 在 p 内和 div 内表现不同？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41647040/