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在评论中已经讨论过的那样，它可能是特定于浏览器的东西。如果您使用值为div的aria role属性，您仍然可以使用group并且不会牺牲辅助功能。

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

来自官方规范：

WAI-ARIA提供的分组角色与fieldset的功能类似和legend。在此示例中，div元素具有role=group 表示包含的元素是组的成员和 aria-labelledby属性会引用id来处理要发送的文本作为小组的标签。

Source

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

2 个答案: