Graham Conzett Graham Conzett - 1 year ago 37
CSS Question

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

EDIT: As of 2012-06-11 this bug has been finally fixed!

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" />

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

Answer Source

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

Thanks for everyone's input.