Is there any way to allow CSS margins to collapse through a fieldset boundary?

Question

In CSS, adjacent vertical margins usually “collapse” into one another (i.e. the vertical space between the elements will be equal to the largest margin, not the sum of the margins).

However, fieldset elements, unlike most other elements, do not allow margins on their child elements to collapse with margins on their sibling elements:

<div>Before div</div>
<div style="margin:0; border:0; padding:0; background:#ccc;">
    <div style="margin:20px 0;">This div has a top and bottom margin, which has collapsed outside of the parent div.</div>
</div>
<div>After div</div>

<div>Before fieldset</div>
<fieldset style="margin:0; border:0; padding:0; background:#ccc;">
    <div style="margin:20px 0;">This div has a top and bottom margin, but the parent fieldset prevents it from collapsing.</div>
</fieldset>
<div>After fieldset</div>

I think (but am not sure) that this is because the fieldset is creating a new block formatting context — the CSS spec doesn’t currently define whether fieldsets should or not, but the HTML5 spec says it “expects” them to.

Is there any way to prevent fieldsets from blocking the collapsing of margins between their children and their siblings?

It looks like my browser (Chrome) normally renders `fieldset` elements with some default padding which might be preventing the margin collapse. Your best course might be simply to use a `div` instead. — Blazemonger, Sep 22 '17 at 13:00
@Blazemonger: “my browser (Chrome) normally renders fieldset elements with some default padding” — it does, but as you’ll notice in my example, child margins still don’t collapse if padding is removed. “Your best course might be simply to use a div instead” — probably not, as `fieldset` indicates to screen readers that form fields are grouped, whereas [`div` indicates nothing](https://stackoverflow.com/a/6941170/20578). — Paul D. Waite, Sep 22 '17 at 13:02
I mean, there are default properties `-webkit-padding-start` and `-webkit-padding-before` which need to be overridden separately from `padding`. But even if I do so, the margins don't collapse, so I'm not sure they're actually playing a part. — Blazemonger, Sep 22 '17 at 13:08
It looks like your theory was right: "The
element is expected to establish a new block formatting context" according to [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset) and [W3C](https://www.w3.org/TR/html5/rendering.html#the-fieldset-and-legend-elements). By the way, I noticed you can get the desired result by puttling the `fieldset` inside of a `div` instead of vice versa. — Blazemonger, Sep 22 '17 at 13:15

Ilya Streltsyn · Accepted Answer · 2017-09-22T14:21:49.433

Yes, the fieldset element establishes the new block formatting context (this behavior was first implemented in the browsers, so the spec incorporated this feature as part of "expected default rendering").

Unfortunately, I don't know any way to "undo" this with CSS, except completely removing the fieldset element's box by setting it to display:contents, which currently only gives the desired result in Chrome with the "Experimental Web Platform features" flag turned on (Firefox, although implemented display:contents back in 2015, hasn't updated its implementation to work for "unusual elements" like form controls according to the recent addition to the spec yet).

score 2 · Answer 2 · answered Sep 22 '17 at 13:08

As you and @Blazemonger already discussed in the comments, it might be something browser-specific. You could still use a div and not sacrifise accessibility if you use the aria role attribute with the value group.

<div role="group">
  <!-- inputs here -->
</div>

From the official spec:

WAI-ARIA provides a grouping role that functions similarly to fieldset and legend. In this example, the div element has role=group to indicate that the contained elements are members of a group and the aria-labelledby attribute references the id for text that will serve as the label for the group.

Source

“it might be something browser-specific” — the behaviour is consistent across several browsers. “You could still use a `div` and not sacrifise accessibility if you use the aria `role` attribute with the value `group`” — true, although then you’re excluding older screenreaders that don’t support this bit of ARIA. (I haven’t checked what the cut-off is.) — Paul D. Waite, Sep 22 '17 at 13:15

Is there any way to allow CSS margins to collapse through a fieldset boundary?

2 Answers2