legend tag and Chrome

Question

I\'ve looked everywhere but to no avail.

I got a

in a form, which displays as I want in every browsers, except in Chrome. It\'s like it

Answer 1

This is a known issue with the legend element in webkit browsers. There are no clean workarounds for the legend element itself, but you could instead add the margin to the first element that follows the legend.

Also, you'll have to explicitly set -webkit-margin-collapse: separate on that element to make it work properly. Try using this:

legend + * {
  -webkit-margin-top-collapse: separate;
  margin-top: 10px;
}

http://jsfiddle.net/JLsPs/1/

(answer found here: Cannot add `margin` to `

` element in Safari & Chrome (WebKit))