Почему заполнение не работает над моими элементами ярлыков?

У меня есть разметка здесь:

<label>Username:</label>

<div class="input small"><div class="left"></div><div class="right"></div><div class="center">
    <input name="username" type="text" />
</div></div>

<label>Password:</label>

<div class="input small"><div class="left"></div><div class="right"></div><div class="center">
    <input name="password" type="password" />
</div></div>

И CSS:

label {
    padding-top: 5px;
}

По какой-то причине прокладка на моих двух элементах ярлыков не работает. Пробовал в IE и Firefox, и он не работает ни в одном случае. Firebug говорит, что отступы есть, но это просто ничего не делает. Пробовал настройку отступов до 50 пикселей, и все равно ничего.

Любые идеи?

Ответы

Ответ 1

A label является встроенным элементом и поэтому не влияет на верхнее и нижнее заполнение. Вам нужно сделать элемент label для элемента уровня блока:

label{
    display: block; /* add this */
    padding-top: 5px;
}

Ответ 2

Ваши метки по умолчанию display:inline и, как таковые, не поддерживают настройку заполнения. Элементы <div>, окружающие их, запускают контексты блоков, которые заставляют его выглядеть так, как будто ваш <label> также является блочным элементом.

Вы можете исправить это, добавив display:block в CSS для метки.

Ответ 3

Предлагая лучший ответ по этим причинам:

  • Высота линии не работает правильно с обернутыми линиями. Он выглядит грязным и пробегает над ним завернутую линию.
  • Дисплей block или inline-block приведет к тому, что label отобразит ниже такие вещи, как флажок, размещенный перед ним.

Решение состоит в использовании псевдо-селектора :before или :after на label. Это сохраняет естественное поведение inline, но при этом добавляет дополнение /margin/height. Пример:

/* to add space before: */

label:before {
  display: block;
  content: " ";
  padding-top: 5px;
}

/* to add space after: */

label:after {
  display: block;
  content: " ";
  padding-bottom: 5px;
}

https://jsfiddle.net/0gpguzwh/

Ответ 5

В качестве альтернативы вы можете использовать свойство line-height:

label {
    line-height: 3;
}