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

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

cssgoogle-chromesafariwebkit


Solution 1:[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;
}

Solution 2:[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.

Solution 3:[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/

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 None
Solution 2
Solution 3 Sparky

Related Questions