Отображение CSS: inline-block не принимает margin-top?

Question

У меня есть элемент с display: inline-block, но он не принимает margin-top.Это потому, что элемент все еще рассматривается как встроенный элемент?

Если да, есть ли у кого-нибудь обходной путь?

РЕДАКТИРОВАТЬ # 1 :

Мой CSS довольно прост:

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

Я закончил, оборачивая содержимое в другой div и давая этому margin-top,Но это вызывает много дополнительной разметки и делает мой код менее четким.

РЕДАКТИРОВАТЬ # 2 :

margin-top & margin-bottom только на элементах inline-blockкажется, работает с положительными значениями.

Answer 1

Вы также можете попробовать заменить отрицательную маржу на

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

в дополнение к вашему стилю .label

Answer 2

Я использовал display: table. Он имеет свойства подгонки содержимого inline-block, но также поддерживает отрицательные поля таким образом, что будет смещать содержимое, следующее за ним, вместе с ним. Наверное, не так, как вы должны его использовать, но это работает.

Answer 3

Вы можете попробовать vertical-align вот так:

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

Я сделал пример на jsfiddle: http://jsfiddle.net/zmmbreeze/X6BjK/.
Но вертикальное выравнивание не очень хорошо работает на IE6 / 7. И есть ошибка рендера Opera (11.64).

Поэтому я рекомендую использовать position:relative.

Answer 4

Это действительно так. Вместо поля вы можете использовать отступы. Другим решением будет использование контейнера div для элемента. Вы делаете этот div inline-block и делаете свой текущий элемент блоком внутри этого контейнера. Затем вы можете добавить поле для вашего элемента.

Было бы полезно, если бы вы получили конкретный пример, желательно в jsfiddle.net или около того. Это также помогло бы более конкретным ответам, вместо того, чтобы содержать только общие описания, подобные моим здесь. ;)