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.