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.

Answer 3

Sorry to post an answer to such an old thread, but there's actually a pretty easy solution for this that doesn't require any hacks. All you need to do is add padding to the top of your fieldset element.

fieldset { padding: 10px 0 0; }

This might make what I'm trying to say a little more clear: http://jsfiddle.net/8fyvY/

Answer 4

Ive just found adding a 1px padding to the fieldset seems to make it suddenly aware of the margins it contains (the spacing created is more than 1 px).

Answer 5

I meet this problem and everything look fine on chrome but safari make the problem. In that case if I add this code

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

I get double margin on Chrome. Then just decide to do the following

fieldset > legend + *{
    padding-top:3px;
}

Hope that help. Cheers!

Answer 6

To get a legend working with bottom border and margin in all browsers I insert a span inside the legend, put the border on the span, set the legend margin to 0 and add padding to the bottom of the legend.

e.g.

legend {
  border: 0;
  margin-bottom: 0;
  padding-bottom: 20px;
}

legend span {
  display: block;
  border-bottom: 2px solid #f0ebe6;
}