Getting Webkit to pay attention to <legend> margins [duplicate]

Question

Possible Duplicate:
Cannot add margin to Legend element in Safari & Chrome

I'm simply trying to get Chrome/Safari to pay attention when I say margin-bottom: 20px on a <legend> tag...

demo: http://jsfiddle.net/HNZWK/

<fieldset>
    <legend>Foo</legend>
    <div>Bar</div>
</fieldset>

legend {
    margin        : 0 0 20px 0;
    display       : block;
    position      : relative;
    border-bottom : 1px solid #000;
}

I can't seem to "detach" the legend from the fieldset. The div below is bumped to below the height of the legend (can be seen by messing with the legend height in css), but it's ignoring the bottom margin.

Any ideas? Every other browser plays nice here...

Answer 1

Solved by using -webkit-margin-collapse and margin-top automatically on the first thing to follow the legend (in this example, the div):

http://jsfiddle.net/HNZWK/5/

legend {
    margin-bottom : 20px;
}

legend + * {
    -webkit-margin-top-collapse : separate;
    margin-top                  : 20px;
}

Answer 2

A lot of browsers seem to have issues with the legend element. My suggest is take the text you put in the legend element and wrap that in a span. Then apply all your styling to that span.

Answer 3

I am seeing the same thing here in Safari.

Perhaps you can use padding instead. That seems to work.

http://jsfiddle.net/HNZWK/3/