为什么 space 在 table 之后，如何删除它？

Question

HTML:

<span id="a">
  <span id="b">
    <span id="c">
      Text
    </span>
  </span>
</span>

CSS:

#a { display: block;        border: 2px solid #e00; }
#b { display: inline-block; border: 2px solid #0e0; }
#c { display: table;                                }

这显示为：

您可以在 this jsFiddle 中查看此内容。

注意 green/inner 框的顶部和 red/outer 框之间没有 space，但是 space 的底部之间有一些 space =37=] 和 red/outer 框。这是由 display: table 引起的。在所有 3 个框上添加 margin: 0; padding: 0 没有效果。所以我的问题是：

你如何解释这个添加space？我发现这有点不寻常。
如何避免它，假设您需要在所有 3 个元素上保持 display 不变，您不能更改 HTML（不能添加或删除元素） , 但除此之外你可以添加任何你想要的 CSS?

Answer 1

在display:inline-block中你可以使用vertical-aligncss属性来垂直设置。

CSS

#a {
  display: block;
  border: 2px solid #e00;
}
#b {
  display: inline-block;
  border: 2px solid #0e0;
  vertical-align:middle;
}
#c {
  display: table;
}

在 #b 中使用了 vertical-align:middle。这将完美地设置它，没有任何空格。

这里是fiddlehttps://jsfiddle.net/yudi/kn31qb3a/9/

Answer 2

为什么不添加这个：

#a{ font-size:0; }

Answer 3

添加 space 是因为您使用 "display: table" 作为您的容器标签，它的默认值是内联的并且旨在与文本一起使用。您将其更改为 inline-block 但它仍然是假设文本。因此它提供 space 需要考虑文本字符 q、y、p、g 和 j 中的后裔...... 更改显示以阻止或将您的跨度更改为 div，默认设置为阻止。

Answer 4

How do you explain this added space? I'm finding this to be somewhat unusual.

正如 Alohci 在评论中所解释的那样，display: table 元素掩盖了其包含文本的基线（它本身位于 table 框中的匿名 table-cell 中）。

display: table 产生这种效果的原因是，如 section 17.4 of the CSS2.1 spec 所述，生成的主框称为 table 包装框, 建立块格式化上下文。 table 框和此元素中的任何标题框都参与此块格式上下文，与布局的其余部分完全隔离。这意味着 display: table 元素中的文本参与 table 包装框（具体来说，在上面提到的匿名 table-cell 中）和 inline-block 元素中的内联格式化上下文完全不知道这段文字。

因此，就 inline-block 而言，它不包含任何 in-flow 行框，因为它自己的块格式化上下文中唯一的 in-flow 框是 block-level table 和 section 10.8 of the spec 表示：

The baseline of an 'inline-block' is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its 'overflow' property has a computed value other than 'visible', in which case the baseline is the bottom margin edge.

正如 Alohci 解释的那样，这会导致 inline-block 将其底部边缘与其所在的行框对齐（通过 strut）。添加的 space 用于在与 inline-block.
相同的行框上容纳排版后缀
如果将 display: table 声明更改为 float 声明，即：
```
#a { display: block;        border: 2px solid #e00; }
#b { display: inline-block; border: 2px solid #0e0; }
#c { float: left;                                   }
```
你会得到 similar results.

How can you avoid it, assuming you need to keep the display as-is on all 3 elements, you can't change the HTML (can't add or remove elements), but otherwise you can add any CSS you'd like?

有很多方法。您可以 force the line-height of #a to be zero and restore the line-height on #b:

#a { display: block;        line-height: 0;      border: 2px solid #e00; }
#b { display: inline-block; line-height: normal; border: 2px solid #0e0; }
#c { display: table;                                                     }

或者你可以 set vertical-align to any of top, middle or bottom to #b:

#a {
  display: block;
  border: 2px solid #e00;
}
#b {
  display: inline-block;
  vertical-align: middle;
  border: 2px solid #0e0;
}
#c {
  display: table;
}

为什么 space 在 table 之后，如何删除它？

Why the space after the table, and how to remove it?

css

css-tables