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

Posted 2023-03-03

【中文标题】有没有办法让 CSS 边距通过字段集边界折叠？

【英文标题】：Is there any way to allow CSS margins to collapse through a fieldset boundary?

【发布时间】：2018-03-04 01:26:40

【问题描述】：

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

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

【问题讨论】：

看起来我的浏览器 (Chrome) 通常会使用一些默认填充来呈现 fieldset 元素，这可能会阻止边距折叠。您最好的方法可能是简单地使用div。

@Blazemonger：“我的浏览器 (Chrome) 通常会使用一些默认填充来呈现字段集元素”——确实如此，但正如您在我的示例中所注意到的，如果填充为删除。 “你最好的方法可能是简单地使用 div”——可能不是，因为 fieldset 向屏幕阅读器表明表单字段是分组的，而 div indicates nothing。

我的意思是，有默认属性-webkit-padding-start 和-webkit-padding-before 需要与padding 分开覆盖。但即使我这样做了，利润也不会崩溃，所以我不确定它们是否真的发挥了作用。

看起来你的理论是对的：“

【参考方案1】：

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

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

【参考方案2】：

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

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

来自官方规范：

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

Source

【讨论】：

“它可能是特定于浏览器的”——这种行为在多个浏览器中是一致的。 “如果您使用带有值 group 的 aria role 属性，您仍然可以使用 div 而不会牺牲可访问性”— 是的，尽管您排除了不支持这一点 ARIA 的旧屏幕阅读器。 （我还没有检查截止是什么。）