有没有办法让 CSS 边距通过字段集边界折叠？

Question

在 CSS 中，相邻的垂直边距通常会相互“折叠”（即元素之间的垂直间距将等于最大边距，而不是边距之和）。

但是，fieldset 元素与大多数其他元素不同，它不允许其子元素的边距与其兄弟元素的边距一起折叠：

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

我认为（但不确定）这是因为字段集正在创建一个新的块格式化上下文——the CSS spec doesn’t currently define whether fieldsets should or not，但the HTML5 spec says it “expects” them to。

有什么方法可以防止字段集阻止他们的孩子和他们的兄弟姐妹之间的边距折叠？

Answer 1

是的，fieldset 元素建立了新的块格式化上下文（此行为首先在浏览器中实现，因此规范将此功能合并为“预期默认呈现”的一部分）。

不幸的是，我不知道有什么方法可以用 CSS 来“撤消”这个，除了通过将 fieldset 元素的框设置为 display:contents 来完全移除它，这目前只能在 Chrome 中使用“实验性”来提供所需的结果Web 平台功能”标志已打开（Firefox，虽然早在 2015 年就实现了 display:contents，但尚未根据recent addition to the spec 更新其实现以适用于表单控件等“异常元素”）。

Answer 2

正如您和@Blazemonger 在 cmets 中已经讨论的那样，它可能是特定于浏览器的。如果您使用带有值group 的 aria role 属性，您仍然可以使用 div 而不会牺牲可访问性。

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

来自官方规范：

WAI-ARIA 提供一个分组角色，其功能类似于fieldset 和legend。在此示例中，div 元素具有 role=group 到 表示包含的元素是组的成员，并且 aria-labelledby 属性引用 id 来获取将提供的文本 作为组的标签。

Source