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

据我所知，这些displayselect器似乎是相同的。

从Mozilla的CSS文档：

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

inline-block ：元素生成一个块元素框，它将与周围的内容一起stream动，就像它是一个单行内嵌框（行为非常像被replace的元素一样）。

看起来， inline-table可以做任何事情都可以用inline-table inline-block来完成。

Answer 1

display:table会使你的标签像表格一样工作。 inline-table只是表示该元素显示为内联级表。 然后，你可以做table-cell ，让你的元素像一个<td>元素。

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

正如其他答案build议你可以在两者之间进行replace，只要你按照其他代码中的显示约定。 （即使用inline-table而不是inline-block inline-table table-cell ）。
点击此链接查看更多信息： https ： //developer.mozilla.org/en-US/docs/Web/CSS/display

Answer 2

inline-block和inline-table都有inline 外部显示angular色 。 这意味着

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

不同之处在于

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

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

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

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

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

生成丢失的子包装：

• 如果“table”或“inline-table”框中的子C不是一个合适的表子，则生成一个匿名的“table-row”框，并且C和C中所有连续的不是正确表子的兄弟。
• 如果“表行”框的子C不是“表格单元格”，那么围绕C和C的所有连续的非“表格单元格”框的同胞生成一个匿名的“表格单元格”框。

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

而table-cell具有flow-root 内部显示模型 ，就像inline-block 。

但是，如果inline-table具有表格内容，它将performance不同于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>