Html 内联块和内联表之间有什么区别？

据我所知，这些

显示

选择器似乎是相同的

从Mozilla CSS文档中：

内联表

：内联表值在HTML中没有直接映射。它的行为类似于

HTML元素，但作为内联框，而不是块级框。表框内是块级上下文

inline-block

：元素生成一个块元素框，该框将与周围的内容一起流动，就像它是一个单独的内联框一样（其行为非常类似于替换的元素）

---

似乎可以用

内联表

做的任何事情都可以用

内联块

来做，并且有一个。这意味着

元素生成一个内联级别框

区别在于

• 有一个,就是
  该元素生成一个长方体，并布置其布局 内容使用。它总是为它的内容建立一个新的标准

• 有一个,就是
  元素生成一个包含 另外生成表框，并建立一个表 格式化上下文

但是，在大多数情况下，

内联表

的行为类似于

内联块

，因为：

生成缺少的子包装器：

• 如果“表”或“内联表”框的子C不是正确的表子级，则在C和周围生成一个匿名的“表行”框 C的所有连续兄弟姐妹都不是适当的表子级
• 如果“表行”框的子C不是“表单元格”，则围绕C和所有连续的 不是“表单元格”框的C的同级

因此，如果

内联表

元素具有非表格内容，则该内容将包装在匿名

表单元格

中

并且有一个，就像

内联块

但是，如果

内联表

具有表格内容，则其行为将不同于

内联块

一些例子：

• 在

  内联块

  中，带有非表格分隔符的单元格将生成不同的

  表

  匿名父级，因此它们将出现在不同的行中。在

  内联表

  中，分隔符将生成一个

  表单元格

  父项，因此它们都将显示在同一行中

  .itable{
  显示：内联表；
  }
  伊布洛克先生{
  显示：内联块；
  }
  .细胞{
  显示：表格单元格；
  }
  .wrapper>span{
  边框：1px实心#000；
  填充物：5px；
  }

  
  行内表格
  表单元格
  内联块
  表单元格
  内联块
  表单元格
  内联块
  表单元格
  

  显示：table

  将使标记的行为类似于table。

  inline table

  仅表示元素显示为内联级别的表。然后，您可以执行

  表格单元格

  ，使元素的行为类似于
  元素

  display:inline

  -将您的元素显示为一个inline元素（如
  ），而

  inline block

  只会将它们组合在一个块容器中
  正如另一个答案所建议的，只要在代码的其余部分遵循显示约定，就可以在两者之间进行替换。（即，将

  表格单元格

  与

  内联表格

  一起使用，而不是与

  内联块

  一起使用）。
  

  ---

  查看有关

  显示的更多信息

  以下是实践中的相关差异。运行代码段以第一眼看到它
  • 周围文本的垂直对齐：
    内联表元素与其顶部单元格或顶部基线对齐（如果内容仅为多行文本）
    内联框周围的文本与底部对齐

  • 高度

    的工作原理不同，例如

    高度

    可能与您在
    

    上预期的不一样（请参见test5和6）

  • width

    和overflow的工作原理不同，例如设置宽度小于内容，请参见test7、8、9、10

  table，span{background:orange}th，td{background:beige}
  测试1
  显示
  内联
  块
  测试2
  显示
  内联
  表格
  测试3
  内联
  块
  测试4
  内联
  桌子
  测试5
  内联
  块
  测试6
  内联
  桌子
  -
  
  
  测试7
  块
  测试8
  桌子
  测试9
  内联
  块
  测试10
  内联
  桌子
  测试11
  内联
  块
  测试12
  内联
  桌子
  -

  显示：内联表不仅仅适用于非表元素。有时你也希望表格是内联的。”似乎任何可以用
  内联表格
  完成的事情都可以用
  内联块
  完成。“我不认为这是真的，因为表格元素和块元素之间存在一些差异（特别是在如何处理子元素方面）。请参阅了解更多详细信息。很高兴看到规范对此进行了排序out@TylerH是的，CSS Display说的是
  流
  ，但CSS 2.1说的表格单元格总是建立一个格式化上下文。我一直不明白为什么他们一开始就不说内部显示模型是
  flow root
  。我甚至给CSS工作组发了电子邮件，但他们忽略了我。我发现在Twitter上无耻地ping规范作者是有效的。现在，它已经为我工作了好几次了。：-）