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

尝试将“vertical-align”添加到i：

的css属性中

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

Updated Fiddle

Answer 2

当 @anddoutoi 正确指出时，该行为在 W3C Recommendations 中解释：

如果框没有基线，请将下边距边缘与父母的基线对齐。

That fiddle demonstrates ，不是空元素的大小增加，而是基线height的上升。

可以避免这种跳跃

将空内容替换为非中断空格，例如：

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

或定义vertical-align属性。

Answer 3

嗨，请告诉我this你需要什么？

<强> 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:'';
}

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

3 个答案: