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

【问题标题】：What is the difference between inline-block and inline-table?内联块和内联表有什么区别？
【发布时间】：2013-10-21 12:52:55
【问题描述】：

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

来自 Mozilla CSS 文档：

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

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

看来inline-table 能做的事，inline-block 也能做。

【问题讨论】：

display: inline-table 不仅仅适用于非表格元素。有时您也希望表格是内联的。
"看来inline-table能做的事，inline-block也能做。"我不认为这是真的，因为表格元素和块元素之间存在一些差异（特别是在如何处理子元素方面）。有关详细信息，请参阅stackoverflow.com/q/25048236。

标签： html css

【解决方案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，即

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

但是，在大多数情况下，inline-table 的行为类似于inline-block，因为anonymous table objects：

生成缺少的子包装器：

如果“表”或“内联表”框的子 C 不是正确的表子，则围绕 C 生成一个匿名“表行”框并 C 的所有不属于正确表子的连续兄弟。

如果“table-row”框的子 C 不是“table-cell”，则在 C 周围和所有连续的不是“表格单元”框的 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>

【讨论】：

很高兴看到规范解决了这个问题
@TylerH 是的，CSS Display 说flow，但是 CSS 2.1 说表格单元总是建立一个格式化上下文。我一直不明白他们为什么不从一开始就说内部显示模型是flow-root。我什至给 CSS WG 发了电子邮件，但他们不理我。
我发现在 Twitter 上无耻地 ping 规范作者是有效的。它现在对我有用几次。 :-)

【解决方案2】：

display:table 将使您的代码表现得像一个表格。 inline-table 只是表示元素显示为内联级表格。然后你可以做table-cell 让你的元素表现得像<td> 元素。

display:inline - 将您的元素显示为内联元素（如 <span>），inline-block 会将它们组合在一个块容器中。

正如另一个答案所建议的，只要您遵循其余代码中的显示约定，您就可以在两者之间进行替换。（即使用table-cell 和inline-table 而不是inline-block）。
查看this link 了解更多关于display 的信息。

【讨论】：

我们应该将所有跨度设置为表格内的内联表格吗？（我发现这对这些跨度上的任何“浮动”都很有用）

【解决方案3】：

以下是实践中的相关差异。运行代码sn -p 一眼就能看出来。

周围文本的垂直对齐方式：
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>_

【讨论】：