Question

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

来自Mozilla CSS文档：

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

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

似乎inline-table可以使用inline-block完成任何事情。

Answer 1

inline-block和inline-table都有inline outer display role。这意味着

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

区别在于

inline-block有一个flow-root inner display model，即

该元素生成一个block container框，并将其列出内容使用flow layout。它总是为其内容建立一个新的block formatting context。
inline-table有一个table inner display model，即

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

但是，在大多数情况下，由于anonymous table objects，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 inner display model，就像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的详细信息，请查看this link。

Answer 3

这是实践中的相关差异。运行代码片段，乍一看。

周围文本的垂直对齐方式：
inline-table元素与其顶部单元格或顶部基线对齐（如果内容仅是多行文本）。
inline-box周围的文本与其底部对齐。
height的工作原理有所不同，例如height可能不是您在
<table style=display:inline-block>上所期望的（请参阅 test5 和 6 ）
width和溢出的作用不同，例如
设置宽度小于内容宽度，请参见 test7、8、9、10

<style> table, span { background:orange } th, td { background:beige } </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:6em>
       <tr><th> inline
       <tr><td> block
     </table>
test6
     <table style=display:inline-table;height:6em>
       <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>
-

inline-block和inline-table有什么区别？

3 个答案: