CSS inline-block causing extra space between 2 vertical divs

Question

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

I need them to display either no 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.

is there reason to use here display: inline-block instead of display: block? — Fabrizio Calderan, Jul 08 '13 at 14:27

score 13 · Accepted Answer · answered Jul 08 '13 at 14:26

13

Change vertical-align: baseline; to vertical-align: top; in your badge class rule.

jsFiddle example

answered Jul 08 '13 at 14:26

j08691

204,283
31
260
272

score 1 · Answer 2 · answered Jul 08 '13 at 14:29

1

display: inline-block; is messing this up. Use float: left; instead (possibly with clear: left; to make sure every badge is on a new line). (jsFiddle)

answered Jul 08 '13 at 14:29

Sumurai8

20,333
11
66
100

1

Using `float: left;`: No more extra space but I have to write more CSS to keep the badge align center – anvoz Jul 08 '13 at 14:43

CSS inline-block causing extra space between 2 vertical divs

2 Answers2