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

Question

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.

It is answered here http://stackoverflow.com/questions/13548168/why-my-inline-block-divs-are-not-aligned-when-only-one-of-them-has-text/13550706#13550706 — anddoutoi, May 14 '14 at 11:21

score 1 · Answer 1 · answered May 14 '14 at 10:57

1

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

answered May 14 '14 at 10:57

Pedro

451
2
5

1

But the question is "Why?", not how to fix it. – Marcel May 14 '14 at 11:00
Thanks @Pedro, but I would like to rather understand CSS behavior on empty content rather than fix current example. – Jake May 14 '14 at 11:01

score 1 · Accepted Answer · edited May 23 '17 at 12:27

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.

score 0 · Answer 3 · answered May 14 '14 at 10:57

0

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

answered May 14 '14 at 10:57

ilmk

599
1
9
19

Thanks @ilmk, but I would like to rather understand CSS behavior on empty content rather than fix current example. – Jake May 14 '14 at 11:04
for empty block, you need to use float:left so that given width and height will take place correctly. Thanks. – ilmk May 14 '14 at 11:07

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

3 Answers3