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

Était-ce utile?

La solution 2

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.

Autres conseils

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

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:'';
}
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top