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.

Answer 2

Well, <legend> really isn't "just another block-level element." Maybe it should be, but the fact is that it inherently is going to have layout peculiarities in that it's supposed to do something pretty weird, as elements go. Between IE and Firefox, the effects of margin and padding on <legend> elements are a lot different.

Do you want to just separate <fieldset> content from the top of the box? If so, I'd try playing with padding-top of the fieldset itself.