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

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

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

http://jsfiddle.net/QYzPa/

CODE:

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>

Ответ 1

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

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

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

label {
  display: block;
}

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

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

label{
 display:inline-block;
}

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

Ответ 2

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

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

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

Ответ 3

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