css - 有没有办法让 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>

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

有什么方法可以防止 fieldsets 阻止他们的 child 和他们的 sibling 之间的边缘崩溃？

Answer 1

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

不幸的是，除了通过将 fieldset 元素的框设置为 display:contents 来完全删除它之外，我不知道有什么方法可以用 CSS“撤消”它。 ，目前仅在打开“实验性 Web 平台功能”标志的情况下在 Chrome 中给出了预期的结果(Firefox，虽然在 2015 年实现了 display:contents，但尚未更新其实现以适用于“不寻常的元素”，如根据 recent addition to the spec 的表单控件)。