内联块和内联表有什么区别？

Question

据我所知，这些

display

选择器似乎是相同的。

来自 Mozilla CSS 文档：

inline-table

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

<table>

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

inline-block

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

看来能用

inline-table

做的事，都可以用

inline-block

做。

Answer 1

inline-block

和

inline-table

都有

inline

外层显示角色。这意味着

该元素生成一个 行内级别框。

不同之处在于

• inline-block

  有一个

  flow-root

  内显模型，即

  该元素生成一个块容器框，并布置其 使用流布局的内容。它总是建立一个新的块 为其内容格式化上下文。

• inline-table

  有一个

  table

  内显模型，即

  该元素生成一个主要的表包装盒，其中包含 额外生成table box，并建立table 格式化上下文。

但是，在大多数情况下，

inline-table

的行为会像

inline-block

，因为匿名表对象:

生成缺失的子包装：

• 如果 'table' 或 'inline-table' 框的子 C 不是正确的表子代，则在 C 周围生成一个匿名 'table-row' 框并 C 的所有连续兄弟姐妹不是正确的表子代。
• 如果“table-row”框的子 C 不是“table-cell”，则在 C 周围生成一个匿名“table-cell”框以及所有连续的 C 的兄弟姐妹不是“表格单元格”框。

因此，如果您的

inline-table

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

table-cell

中。

并且

table-cell

有一个

flow-root

内展示模型，就像

inline-block

一样。

但是，如果

inline-table

具有表格内容，则其行为将与

inline-block

不同。

一些例子：

• 在

  inline-block

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

  table

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

  inline-table

  内部，分隔符将生成

  table-cell

  父级，因此它们都将出现在同一行。

  .itable {
    display: inline-table;
  }
  .iblock {
    display: inline-block;
  }
  .cell {
    display: table-cell;
  }
  .wrapper > span {
    border: 1px solid #000;
    padding: 5px;
  }

  <fieldset>
    <legend>inline-table</legend>
    <div class="itable wrapper">
      <span class="cell">table-cell</span>
      <span class="iblock">inline-block</span>
      <span class="cell">table-cell</span>
    </div>
  </fieldset>
  <fieldset>
    <legend>inline-block</legend>
    <div class="iblock wrapper">
      <span class="cell">table-cell</span>
      <span class="iblock">inline-block</span>
      <span class="cell">table-cell</span>
    </div>
  </fieldset>

• 内部细胞不会生长填满宽阔的

  inline-block

  ：

  .itable {
    display: inline-table;
  }
  .iblock {
    display: inline-block;
  }
  .wrapper {
    width: 100%;
  }
  .cell {
    display: table-cell;
    border: 1px solid #000;
  }

  <fieldset>
    <legend>inline-table</legend>
    <div class="itable wrapper">
      <span class="cell">table-cell</span>
    </div>
  </fieldset>
  <fieldset>
    <legend>inline-block</legend>
    <div class="iblock wrapper">
      <span class="cell">table-cell</span>
    </div>
  </fieldset>

• inline-block

  的边框不会与内部单元格的边框折叠：

  .wrapper, .cell {
    border-collapse: collapse;
    border: 5px solid #000;
  }
  .itable {
    display: inline-table;
  }
  .iblock {
    display: inline-block;
  }
  .cell {
    display: table-cell;
  }

  <fieldset>
    <legend>inline-table</legend>
    <div class="itable wrapper">
      <span class="cell">table-cell</span>
      <span class="cell">table-cell</span>
    </div>
  </fieldset>
  <fieldset>
    <legend>inline-block</legend>
    <div class="iblock wrapper">
      <span class="cell">table-cell</span>
      <span class="cell">table-cell</span>
    </div>
  </fieldset>

Answer 2

display:table

将使您的标签表现得像表格一样。

inline-table

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

table-cell

让您的元素表现得像

<td>

元素。

display:inline

- 将元素显示为内联元素（如

<span>

），并且

inline-block

只会将它们分组到块容器中。

正如另一个答案所建议的，只要您遵循其余代码中的显示约定，您就可以在两者之间进行替换。 （即，将

table-cell

与

inline-table

一起使用，而不是与

inline-block

一起使用）。
检查此链接以获取有关

display

的更多信息。

Answer 3

以下是实践中的相关差异。运行代码片段，第一眼就能看到。

• 周围文本的垂直对齐：
  

  inline-table

  元素与其顶部单元格或顶部基线对齐（如果内容只是多行文本）。
  

  inline-box

  周围的文字与其底部对齐。

• height

  的工作方式不同，例如

  height

  可能与您对
  

  <table style=display:inline-block>

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

• width

  和溢出的工作方式不同，
  例如设置宽度小于内容，参见 test7, 8, 9, 10

<style>
     table, span { background:gold; color:red }
     th, td { background:rgba(0,0,0,0.3) }
</style>

_test1
     <span style=display:inline-block> 
       display <br> inline <br> block
     </span>
_test2
     <span style=display:inline-table>
       display <br> inline <br> table
     </span>
_test3
     <table style=display:inline-block>
       <tr><th> inline
       <tr><td> block
     </table>
_test4
     <table style=display:inline-table>
       <tr><th> inline
       <tr><td> table
     </table>
_test5
     <table style=display:inline-block;height:5em>
       <tr><th> inline
       <tr><td> block
     </table>
_test6
     <table style=display:inline-table;height:5em>
       <tr><th> inline
       <tr><td> table
     </table>_
<br>
_test7
     <span style=display:inline-block;width:1.4em>
       block
     </span>
_test8
     <span style=display:inline-table;width:1.4em>
       table
     </span>
_test9
     <table style=display:inline-block;width:1.4em>
       <tr><th> inline
       <tr><td> block
     </table>
_test10
     <table style=display:inline-table;width:1.4em>
       <tr><th> inline
       <tr><td> table
     </table>
_test11
     <table style=display:inline-block;width:5em>
       <tr><th> inline
       <tr><td> block
     </table>
_test12
     <table style=display:inline-table;width:5em>
       <tr><th> inline
       <tr><td> table
     </table>_