Question: I am curious to know why following elements have various heights:

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

```

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

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

```

That case may be illustrated by <http://jsfiddle.net/pJw9d/> (hover the symbols with pointer to view the difference in sizes).

---

*PS: I know how to fix such problem (e.g., by using non-breaking space (`&nbsp;` or `\00a0`), or by defining CSS positions), but I would like to know why it behaves that way.*

Answer: 
Try adding "vertical-align" to your css attributes for i:

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

```

[Updated Fiddle](http://jsfiddle.net/pJw9d/1/)
Hi Please let me know [this](http://jsfiddle.net/pJw9d/3/) is what you need?

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

```