Отображение CSS: встроенный блок не принимает margin-top?

У меня есть элемент с дисплеем: встроенный блок, но он, похоже, не принимает 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 элементы работают только с положительными значениями.

Ответы

Ответ 1

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

Ответ 2

вы также можете попробовать заменить отрицательный запас на

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

в дополнение к остальной части стиля .label

Ответ 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. И есть ошибка, связанная с опера (11.64).

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

Ответ 4

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

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