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?

Answer 1

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).

Answer 2

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