空的行内块元素的垂直对齐 [英] Vertical alignment of empty inline-block elements

问题描述

请考虑以下html / css：

Consider the following html/css:

<style>
span
{
  display:inline-block;
  width:5em;
  height:5em;
  padding:1em;
}
</style>

a
<span style="background-color:blue;">b</span>
<span style="background-color:green;"></span>
<span style="background-color:red;">c</span>
d

蓝色和红色框以及框内部和周围的文字水平。空绿色框不;它出现在其他两个框之上。如果我添加一些文本到绿色框，这个行为停止，一切都按照我想要的方式排列。

The blue and red boxes, plus the text both inside and surrounding the boxes lines up horizontally. The empty green box does not; it appears above the other two boxes. If I add some text to the green box, this behavior stops and everything lines up the way I want it to.

这在IE8（标准模式），FireFox 3.0和Chrome，所以我假设有一些空的inline-block元素的属性，我不明白。

This happens consistently in IE8 (standards mode), FireFox 3.0 and Chrome, so I'm assuming there is some property of empty inline-block elements that I don't understand.

我可以通过指定一个vertical-align属性，但是这四个文本值不再对齐。有什么想法吗？

I can make the boxes line up by specifying a vertical-align property, but then the four text values are no longer aligned. Any thoughts? I'm stumped on this one.

推荐答案

让span顶部对齐，然后使负边距等于你的padding， t需要非破坏性的空间hack。

Give the span top alignment then negative margin equal to your padding, and you don't need the non-breaking space hack.

span
{
    display:inline-block;
    width:5em;
    height:5em;
    padding:1em;
    vertical-align:top;
    margin-top: -1em;
}



a
    <span style="background-color:blue;">b</span>
    <span style="background-color:green;"></span>
    <span style="background-color:red;">c</span>
d

这篇关于空的行内块元素的垂直对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！