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

Question

I have an element with display: inline-block, but it doesn\'t seem to accept margin-top. Is this because the element is still treated as an inline element?

If yes, d

Answer 1

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.