Рассмотрим следующий html / css:

span
{
  display:inline-block;
  width:5em;
  height:5em;
  padding:1em;
}


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

Синие и красные рамки, а также текст внутри и вокруг них располагаются горизонтально. Пустого зеленого ящика нет; это появляется выше двух других коробок. Если я добавлю какой-то текст в зеленое поле, это поведение прекратится, и все выстроится так, как я хочу.

Это происходит последовательно в IE8 (стандартный режим), FireFox 3.0 и Chrome, поэтому ям при условии, что есть некоторые свойства пустых элементов встроенного блока, которые я неТ понять.

Я могу выровнять поля, указав свойство вертикального выравнивания, но тогда четыре текстовых значения больше не будут выровнены. Какие-нибудь мысли? Я'Я озадачен этим.