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

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

  该元素生成一个主表包装器框,其中包含另外生成的表框,并建立表格式化上下文.

但是,在大多数情况下,inline-table将表现得像inline-block因为匿名表对象:

生成丢失的子包装器:

• 如果"table"或"inline-table"框中的子C不是正确的表子项,则在C周围生成一个匿名的"table-row"框,并且C的所有连续兄弟都不是正确的表子项.
• 如果'table-row'框的子C不是'table-cell',则在C周围生成一个匿名的'table-cell'框,并且所有C的连续兄弟都不是'table-cell'框.

因此,如果您的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:https: //developer.mozilla.org/en-US/docs/Web/CSS/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>_