css - 为什么表格后面有空格，如何删除它？

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 中查看此内容.

注意绿色/内框顶部和红色/外框之间没有空间，但绿色/内框和红色/外框底部之间有一些空间。这是由 display: table 引起的。添加 margin: 0; padding: 0 在所有 3 个框上都没有效果。所以我的问题是:

1. 您如何解释这个增加的空间？我发现这有点不寻常。
2. 如何避免它，假设您需要在所有 3 个元素上保持 display 不变，您不能更改 HTML(不能添加或删除元素)，否则您可以添加任何您喜欢的 CSS 吗？

Answer 1

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

   正如 Alohci 在评论中所解释的那样，display: table 元素掩盖了其包含文本的基线(它本身位于表格框内的匿名表格单元格中)。

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

   因此，就行内 block 而言，它不包含任何流内行框，因为它自己的 block 格式化上下文中唯一的流内框是 block 级表，并且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 所解释的那样，这会导致内联 block 将其底部边缘与其所在的行框对齐(通过 strut )。添加的空间用于在与内联 block 相同的行框上容纳排版下行字符。

   如果将 display: table 声明更改为 float 声明，即:

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

   你会得到 similar results .

2. 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;
   }