Style legend tag as block

Question

I've setup a demo of my problem at the following url: http://jsfiddle.net/YHHg7/4/

I'm trying to do the following:

legend {
  display: block;
  border-bottom: 1px solid red;
  margin-bottom: 50px;
}

However it seems all browsers ignore the display: block on a legend tag. Is this the correct behaviour for this tag or am I doing something wrong?

Answer 1

<legend> is a block-level element by default, so whether you include display: block there's no difference. However, it's treated specially together with <fieldset> by browsers as a label for a fieldset.

To "detach" it from the <fieldset> you can give it a non-static position, or float it, or even just play a little more with its margins. Results can be a little unpredictable, though, again due to the special treatment of both elements.

Answer 2

IMO the best thing you can do to control legend is just leave it as a semantic fixture only.

CSS:

legend {
    display: block;
    margin: 0;
    border: 0;
    padding: 0;
    width: 100%;
}

And then use a span inside it to control all of your desired styling:

HTML:

<legend><span>Span to the rescue!</span></legend>

CSS:

legend span {
    display: block;
    padding: 0 20px;
    border-bottom: 1px solid red;
}

Clean, semantic, and generally easily manipulated across different browsers