Why element has various height depending on whether it has content or not [duplicate]

Question

This question already has answers here:

Why my inline-block divs are not aligned when only one of them has text? [duplicate] (4 answers)

Closed 9 years ago.

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

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

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 (  or \00a0), or by defining CSS positions), but I would like to know why it behaves that way.

Answer 1

As @anddoutoi correctly pointed, that behavior is explained in W3C Recommendations:

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

That fiddle demonstrates, 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.:

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

• or by defining the vertical-align property.

Answer 2

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

Answer 3

Hi Please let me know this 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:'';
}