Inline CSS block creating extra space between two vertical divs

Question

I have several div ( class="badge" ) to display vertically. Not sure why I got extra space between 2 divs in FF and IE (Chrome works fine).

I need them to display either a space or equal space in all browsers.

http://jsfiddle.net/2hxak/1/

HTML:

 <div class="stat-badges"> <div class="badge"> <div class="stat-num">123456</div> </div> <div class="badge"> <div class="stat-num">0</div> </div> </div> 

CSS

 .stat-badges { text-align: center; width: 55px; } .badge { display: inline-block; padding: 2px 4px; color: #ffffff; vertical-align: baseline; white-space: nowrap; background-color: #999999; } .badge .stat-num { max-width: 30px; min-width: 20px; padding: 3px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } 

The space will disappear if I remove overflow: hidden; . I keep overflow: hidden with ellipse to crop long text.

Answer 1

Change vertical-align: baseline; on vertical-align: top; in the icon class rule.

JsFiddle example

Answer 2

display: inline-block; ruin it. Use float: left; instead (possibly with clear: left; so that each icon is on a new line). ( jsFiddle )