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

Question

据我所知，这些display选择器似乎是相同的。

来自 Mozilla CSS 文档：

inline-table: inline-table 值在 HTML 中没有直接映射。它的行为类似于<table>HTML 元素，但作为内联框，而不是块级框。表格框内是块级上下文。

inline-block：该元素生成一个块元素框，该框将与周围的内容一起流动，就好像它是一个单一的内联框（行为很像被替换的元素）。

似乎可以inline-table用inline-block.

Answer 1

两者兼有inline-block外inline-table显的作用。这意味着inline

该元素生成一个内联级 box。

不同之处在于

• inline-block有一个内部显示模型，即flow-root

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

• inline-table有一个内部显示模型，即table

  该元素生成一个包含额外生成的表格框的主体表格包装框，并建立表格格式化上下文。

但是，在大多数情况下，由于匿名表对象inline-table的行为会像：inline-block

生成缺少的子包装器：

• 如果“table”或“inline-table”框的子 C 不是正确的 table child，则围绕 C 和 C 的所有不是正确 table 子的连续兄弟生成一个匿名的“table-row”框。
• 如果“table-row”框的子 C 不是“table-cell”，则围绕 C 和 C 的所有非“table-cell”框的连续兄弟生成一个匿名的“table-cell”框。

因此，如果您的inline-table元素具有非表格内容，则该内容将被包装在匿名table-cell.

并且table-cell有一个内部展示模型，就像。flow-root inline-block

但如果inline-table具有表格内容，它的行为将不同于inline-block.

一些例子：

• 在 ainline-block中，带有非表格分隔符的单元格将生成不同的table匿名父级，因此它们将出现在不同的行。在 aninline-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-cellwithinline-table和 not with 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:silver }
</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>_