html - Cannot add `margin` to `<legend>` element in Safari & Chrome (WebKit)

Question

EDIT: As of 2012-06-11 this bug has been finally fixed! https://bugs.webkit.org/show_bug.cgi?id=35981#c1

I have some pretty straightforward markup:

<form action="">
    <fieldset class="compact">                  
        <legend>Member Tools</legend>
        <label for="username">Username</label>
        <input name="username" id="username" type="text"/>
        <label for="password">Password</label>
        <input name="password" id="password" type="password" />
    </fieldset>
</form>

I am attempting to add a small margin to the bottom of the legend element, this works just fine in Firefox 2 and 3 as well as IE 5-8, however in Safari and Chrome adding a margin does nothing. As far as I know legend is just another block level element and Webkit should have no issue adding a margin to it, or am I incorrect?

Answer 1

After a bit of research I found a work-around for this that I believe to be the least "hacky" method for solving it. Using the nasty webkit targeting hacks really weren't an option, but I found that the -webkit-margin-collapse: separate property seems to work in stopping the margins on the elements from collapsing just as it describes.

So in my scenario the following fixes the issue by adding a margin to the top of the first label element (right below the legend) in the fieldset:

fieldset > label:first-of-type
{
-webkit-margin-top-collapse: separate;
margin-top: 3px;
}

Not perfect, but better than nothing, other browsers should just collapse the margins normally.

If anyone is curious someone actually did file a bug report about this # 35981

https://bugs.webkit.org/show_bug.cgi?id=35981

Thanks for everyone's input.