垂直对齐的行内块元素上方的空白

Question

代码

 .outer { display: block; background: lightblue; font-size: 50px; }.inner { display: inline-block; width: 50px; height: 50px; background: red; vertical-align: middle; }

 <div class="outer"><div class="inner"></div></div>

你可以在这里玩看结果： https://jsfiddle.net/y1jkw3nu/5/

问题

我在红色方块上方有这个奇怪的空白区域。

问题

有人可以向我解释这个空白空间是从哪里来的吗？ 我知道这是因为font-size: 50px ，但是.inner div 有vertical-align: middle 。 这不是意味着它应该位于行的中间吗？

Answer 1

那是因为里面的“内容”为可能存在的文本保留了高度......放 line-height:0 并且它消失了..

 .outer { display: block; background: lightblue; font-size: 50px; line-height:0; } .inner { display: inline-block; width: 50px; height: 50px; background: red; vertical-align: middle; }

 <div class="outer"><div class="inner"></div></div>

Answer 2

首先，您需要了解 vertical-align 在这里做了什么：

中间

将框的垂直中点与父框的基线加上父框 x 高度的一半对齐。

所以你需要找到你的盒子的“基线”、“x-height”和中点（这个很简单）。

为了更好地找到这些值，添加一些文本：

 .outer { display: block; background: linear-gradient(blue 0 0) 50% calc(50% + .33em - .5ex)/100% 2px no-repeat, linear-gradient(#fff 0 0) 50% calc(50% + .33em)/100% 2px no-repeat lightblue; font-size: 50px; } .inner { display: inline-block; width: 50px; height: 50px; background: linear-gradient(green 0 0) 50%/100% 2px no-repeat red; vertical-align: middle; }

 <div class="outer">ÂBp <div class="inner"></div> </div>

在上面，请注意“蓝色”（基线 + x 高度的一半）和“绿色”（中点）线是如何对齐的。 另请注意蓝色如何从基线（白色）偏移0.5ex 。

即使没有文本，上述内容仍然适用，只有字体属性会影响这种对齐方式。

...如果每个行框都以具有元素字体和行高属性的零宽度行内框开头。 我们称那个假想的盒子为“支柱”。 （这个名字的灵感来自 TeX。）。

基线上方和下方字体的高度和深度被假定为包含在字体中的度量。 （有关更多详细信息，请参阅 CSS 级别 3。）

该“支柱”元素是用来代替文本的元素。

您还可以减小框的大小，并且底部也将有空间：

 .outer { display: block; background: linear-gradient(blue 0 0) 50% calc(50% + .33em - .5ex)/100% 2px no-repeat, linear-gradient(#fff 0 0) 50% calc(50% + .33em)/100% 2px no-repeat lightblue; font-size: 50px; } .inner { display: inline-block; width: 50px; height: 30px; background: linear-gradient(green 0 0) 50%/100% 2px no-repeat red; vertical-align: middle; }

 <div class="outer">ÂBp <div class="inner"></div> </div>

Answer 3

你可以给.outer一个height: 50px和.inner position:absolute 。

    .outer {
    display: block;
    background: lightblue;
    font-size: 50px;
    height:50px;
}

.inner {
    display: inline-block;
    width: 50px;
    height: 50px;
    background: red;
    vertical-align: middle;
    position:absolute;
}