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: 
As *[@anddoutoi](https://stackoverflow.com/users/98378/anddoutoi)* correctly pointed, that behavior is explained in **[W3C Recommendations](http://www.w3.org/TR/CSS2/visudet.html#propdef-vertical-align)**:

> 
> If the box does not have a baseline, align the bottom margin edge with the parent's baseline.
> 
> 
> 

**[That fiddle demonstrates](http://jsfiddle.net/aV8fL/)**, that it is not that empty element's size increases, but that it is *risen* for the baseline `height`.

---

Such jumps can be avoided either

* by replacing the empty content with *non-breaking space*, e.g.:

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

```

* or by defining the `vertical-align` property.
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/)