css - 为什么元素有不同的高度取决于它是否有内容

Question

我很想知道为什么以下元素有不同的高度：

<i class="icon"></i>
<i class="noicon"></i>

i {
    display: inline-block;
    width: 1em;
    height: 1em;
}

i.icon:before   { content: 'Ω'; }
i.noicon:before { content: '';  }

这种情况可以通过http://jsfiddle.net/pJw9d/来说明（用指针悬停符号以查看大小差异）。

---

PS：我知道如何解决此类问题（例如，通过使用不间断空格（ 或\00a0），或通过定义 CSS 位置），但我想知道它为什么会这样。

Answer 1

尝试将“垂直对齐”添加到您的 css 属性中：

i {
   display: inline-block;
   width: 1em;
   height: 1em;
   background: green;
   vertical-align: top; //add this
}

更新小提琴

Answer 2

正如@anddoutoi正确指出的那样，W3C 建议中解释了这种行为：

如果框没有基线，则将底部边距边缘与父项的基线对齐。

那个小提琴表明，不是空元素的大小增加，而是基线上升height了。

---

也可以避免这种跳跃

• 通过用不间断空格替换空内容，例如：

    i.noicon:before { content: '\00a0'; }

• 或通过定义vertical-align属性。

Answer 3

嗨，请告诉我这是您需要的吗？

html

<div><i class="icon"></i><i class="noicon"></i></div>
<div><i class="icon"></i></div>

css

body {
    font-size: 2em;
}
div {
    float:left;
}
i {
    display: block;
    width: 1em;
    height: 1em;
    background: green;
    float:left;
}
i.icon:before {
    content:'Ω';
}
i.icon:hover:before {
    content:'';
}