Adjusting line-height of label elements in HTML forms

Question

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/

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>

Answer 1

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.

Answer 2

I think what's Marcio is trying to say is that in inline elements (like spans or labels), which can reside one after another in the text, you can't specify attributes that apply to the whole paragraph.

The obvious one is text-align: the paragraph should specify the align and not the individual spans. So as line-height and such.

The opposite to the inline elements are the block elements like div or p which occupy a square on a page and are laid out between each other on a higher block-level. This behavior is controlled with the CSS attribute display with which can make div behave just like span and vice versa.