Yarin Yarin - 4 months ago 7x
CSS Question

Adjusting line-height of label elements in HTML forms

I have a form with a wrapping

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

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



<form style="width:200px;">
<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>


form label,
form p


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:


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.