inline-block div有和没有文字不垂直对齐 [英] inline-block div with and without text not vertically aligned

问题描述

我并排有两个 div 。两者大小相同， display：inline-block 。两者之间的唯一区别是，第一个有一些文本，第二个是空白的。

HTML：

 < div> 1< / div> 
< div>< / div> 
  

CSS：

  div {
 display：inline-block; 
 border：1px纯黑色; 
 width：50px; 
 height：50px; 
} 
  

第一个div低于第二个。

我知道所有可能的修复方法，比如向第二个div添加一些文本或& nbsp; 。当然，添加 vertical-align：top 也会修复此问题。

我想知道的是，can有人解释说，为什么一个空白的div与其中有一些文本的div有不同的对齐方式？

JSFiddle

解决方案

内联块框默认垂直对齐，内嵌块框的基线与它所在的行框的基线对齐。

包含一行文本的内嵌块框的基线是该行的基线。更一般地说，内联块的基线是它包含的最后一行文本的基线。但是这意味着没有包含任何文本的内联块的基线。

在这种情况下，回退规则开始执行，并且内联的底部块框放置在其线框的基线上。

I have two divs side by side. Both have the same size and display: inline-block. The only difference between the two is, the first one has some text and the second one is blank.

HTML:

<div>1</div>
<div></div>

CSS:

div {
    display: inline-block;
    border: 1px solid black;
    width: 50px;
    height: 50px;
}

The first div is lower than the second one.

I am aware of all the possible fixes, like adding some text or a   to the second div. Adding vertical-align: top fixes this as well, of course.

What I want to know is, can someone explain, why a blank div has a different alignment than a div with some text in it?

JSFiddle

解决方案

Inline-block boxes are,by default vertically aligned such that the baseline of the inline-block box aligns to the baseline of the line box in which it is rendered.

The baseline of an inline-block box with one line of text, is the baseline of that line. More generally, the baseline of an inline-block is the baseline of the last line of text that it contains. But that means that there is no baseline for an inline-block that contains no text.

In such a situation a fall back rule kicks in, and the bottom of the inline-block box is placed on the baseline of its line box.

这篇关于inline-block div有和没有文字不垂直对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！