Fieldset和边距崩溃

Question

为什么似乎无法在fieldset和legend上折叠边距？

＆＃13;

＆＃13;

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  border: none;
}

fieldset,
legend,
div,
h1 {
  margin: 20px 0;
}

legend,
h1 {
  font-size: 14px;
  font-weight: bold;
}

＆＃13;

<fieldset>
  <legend>With fieldset</legend>
  <div>No collapse</div>
</fieldset>
<fieldset>
  <div>No collapse</div>
</fieldset>

<div class="fieldset">
  <h1>Without fieldset</h1>
  <div>Collapse</div>
</div>
<div class="fieldset">
  <div>Collapse</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您的HTML：

<fieldset>
  <legend>With fieldset</legend>
  <div>No collapse</div>  
</fieldset>
<fieldset>
  <div>No collapse</div>  
</fieldset>

<div class="fieldset">
  <h1>Without fieldset</h1>
  <div>Collapse</div>
</div>
<div class="fieldset">
  <div>Collapse</div>
</div>

这是更新的CSS：

.fieldset, fieldset, legend, div, h1 {
  margin: 10px 0;
  float: left;
  width: 100%;
}

添加浮动和宽度：）

Answer 2

将此添加到您的reset.css文件中：

legend + * {
  -webkit-margin-top-collapse: discard;
}

从上面的问题中查看此updated version of the Codepen example。

也在这里演示...

工作演示

legend,
p {
  margin: 20px
}

legend + * {
  /* comment out this line below and click Run to see the difference */
  -webkit-margin-top-collapse: discard;
}

<fieldset>
  <legend>Legend <strong>with</strong> collapsing margin below</legend>
  <p>☝ margins collapsed </p>
</fieldset>

非工作演示（供比较）

legend,
p {
  margin: 20px
}

<fieldset>
  <legend>Legend <strong>without</strong> collapsing margin below</legend>
  <p>☝ margins not collapsed </p>
</fieldset>