Style legend tag as block

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开发者_如何学Python: 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?

---

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

---

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

---

A legend is a block-level element by default. If I add the width back in using Chrome (Dev channel), the width of the legend is changed appropriately.

If you're instead wondering about the margin style, a legend can only have its left or right margins set, and that would place it relative to the fieldset its's contained in. If you want to add spacing to the other elements, then you would probably want to add padding to the fieldset itself.

---

Uncomment the width attribute if you want the red line to go all the way across.

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