Cannot add `margin` to `` 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:<

Answer 1

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;
}