是否有任何方法可以让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>

我认为（但不确定）这是因为FieldSet正在创建新的块格式化上下文 - CSS规格当前没有定义字段集是否应该，但是HTML5 Spec表示它"期望"它们会"。

是否有任何方法可以防止野外集体阻止其子女与兄弟姐妹之间边缘的崩溃？

Answer 1

是的，fieldset元素建立了新的块格式上下文（此行为首先在浏览器中实现，因此规格将此功能纳入了"预期默认渲染"的一部分）。

不幸的是，我不知道用CSS"撤消"此方法的任何方法，除非通过将其设置为display:contents完全删除fieldset元素的框，而CC_4目前仅通过"实验Web平台功能"为Chrome提供所需的结果。FLAG已打开（Firefox在2015年实施了display:contents，但尚未根据最新的规格添加来更新其实现的"不寻常元素"，例如表单控件）。

Answer 2

正如您和@blazemonger在评论中已经讨论的，这可能是浏览器特定的。如果您将ARIA role属性与值group。

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

从官方规格中：

Wai-aria提供了与fieldset相似的分组角色 和legend。在此示例中，div元素的role=group为 表明所包含的元素是组的成员， aria-labelledby属性引用将服务的文本的id 作为组的标签。

源