Yarin Yarin - 5 months ago 12
CSS Question

Adjusting line-height of label elements in HTML forms

I have a form with a wrapping

<label>
element, but the space between the
<label>
's two lines is too big and I can't seem to adjust the line-height of the
<label>
.

Here is an example of a
<label>
and a
<p>
, both with the same CSS applied. As you can see, the
<p>
adjusts correctly, while the
<label>
remains unchanged.

http://jsfiddle.net/QYzPa/

HTML:

<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>


CSS:

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

Answer

All the HTML tags are classified in categories that describe their nature. This classification can be related to semantics, behavior, interaction and many other aspects.

Both p and label tags are classified in "flow content" tags category. But there is one slight difference between then: the label tag is also classified in a category called "phrasing content".

What do all this mean in practice? The browser default rendering will follow the specified tag classifications and will treat the p tag as a block element, while the label tag will, by default, be treated as an in-line element. You can modify this by overwriting the default CSS rule: just tell the browser that you want your label to be rendered like a block element.

label {
  display: block;
}

You need to do that because elements that are in-line (display:inline) can't have properties like height, line-height, margin-top, margin-bottom (they will be ignored).

If you want an inline element to have a height property but still keep it with it's inline behavior (without cause a LINE BREAK), you can declare it as:

label{
 display:inline-block;
}

It's always good to take a read at HTML 's documentation. Here is a nice graph showing the categories, it can save you a lot of time, specially when dealing with these small quirks.

Comments