Настройка высоты строки элементов метки в формах HTML

Question

У меня есть форма с обертывающим элементом <label>, но расстояние между двумя строками <label> слишком велико, и я не могу отрегулировать высоту строки <label>.

Вот пример <label> и <p>, оба с одинаковым применением CSS. Как видите, <p> настроен правильно, а <label> остается неизменным.

http://jsfiddle.net/QYzPa/

КОД:

form label,
form p
{    
  font-weight:bold;
  line-height:.7em;
}

<form style="width:200px;">
    <fieldset>
         <label for="textarea">In ten or fewer words, explain American history</label>
        <p>In ten or fewer words, explain American history</p>
        <textarea name="textarea" rows="5" ></textarea>
    </fieldset>
</form>

Answer 1

Все теги HTML классифицированы по категориям, которые описывают их природу. Эта классификация может быть связана с семантикой, поведением, взаимодействием и многими другими аспектами.

Оба тега p и label классифицируются в категории тегов "содержимого потока". Но есть одно небольшое различие между ними: тег label также классифицируется в категории, называемой «фразовое содержимое».

Что все это значит на практике? Рендеринг по умолчанию в браузере будет соответствовать указанной классификации тегов и будет обрабатывать тег p как элемент блока, а тег label по умолчанию будет рассматриваться как встроенный элемент. Вы можете изменить это, переписав правило CSS по умолчанию: просто скажите браузеру, что вы хотите, чтобы ваш label отображался как элемент блока.

label {
  display: block;
}

Это необходимо сделать, потому что элементы, которые находятся в строке (display: inline), не могут иметь такие свойства, как height, line-height, margin-top, margin-bottom (они будут игнорироваться).

Если вы хотите, чтобы встроенный элемент имел свойство высоты, но при этом сохранял его в своем встроенном поведении (без причины LINE BREAK), вы можете объявить его как:

label{
 display:inline-block;
}

Всегда полезно прочитать документацию HTML. Вот хороший график, показывающий категории , он может сэкономить вам много времени, особенно при работе с этими маленькими причудами.

Answer 2

Я думаю, что Марсио пытается сказать, что в inline элементах (например, span s или label s), которые могут находиться в тексте один за другим, нельзя указывать атрибуты, которые применяются к весь абзац.

Очевидным является text-align: в абзаце должно быть указано выравнивание, а не отдельные span s. Так как line-height и такие.

Противоположными элементам inline являются элементы block, такие как div или p, которые занимают квадрат на странице и располагаются между собой на более высоком уровне блока. Это поведение контролируется атрибутом CSS display, с помощью которого div может вести себя так же, как span и наоборот.

Answer 3

Не совсем уверен, почему, но это будет работать, если вы установите display: block; на этикетке