CSS display: inline-block does not accept margin-top?

Solution 1:

you can also try replacing the negative margin with

.label{
    position:relative;
    top:-2px;
}

in addition to the rest of your .label style

Solution 2:

I used display: table. It has the content-fitting properties of inline-block but also supports negative margins in a way that will shift the content following it up along with it. Probably not how you should be using it, but it works.

.label {
  background: #ffffff;
  display: table;
  margin-top: -2px;
  padding: 7px 7px 5px;
}

Solution 3:

You can try vertical-align like this:

.label {
  background: #ffffff;
  display: inline-block;
  margin-top: -2px;
  vertical-align: 2px;
  padding: 7px 7px 5px;
}

I made an example on jsfiddle: http://jsfiddle.net/zmmbreeze/X6BjK/.
But vertical-align not work well on IE6/7. And there is a opera(11.64) rendering bug.

So I recommend to use position:relative instead.