为什么我的图例不尊重父字段集的填充？

Question

看看这个：

<fieldset>顶部有50px的填充。 <legend>不尊重这一点，但<p>会这样做。这是为什么？

注意：我在下面和我的代码笔中使用Bootstrap，但无论是否使用Bootstrap，问题都适用。

HTML

<div class='placeholder'></div>

<fieldset>
  <legend>LEGEND</legend>
  <p>PARAGRAPH</p>
</fieldset>

CSS

.placeholder {
  height: 100px;
  background-color: red;
}

fieldset {
  padding-top: 50px;
}

Code Pen

Answer 1

因为HTML5规范的Rendering section是这样说的

  

10.3.13 fieldset和legend元素

     

如果fieldset元素的子元素与条件匹配   在下面的列表中，第一个这样的孩子是fieldset   元素的渲染图例：

     

  
• 孩子是legend元素。
  
• 孩子不会流出（例如，没有绝对定位或漂浮）。
  
• 孩子正在生成一个盒子（例如，它不是'display：none'）。
  

     

预计fieldset元素的rendered legend（如果有）   要在fieldset元素的顶部边框边缘上呈现   作为“块”框（覆盖任何明确的“显示”值）。

Answer 2

Filedset和图例一起工作，p充当它自己的实体，这就是为什么图例不尊重填充。传奇属于该字段集。如果你想让字段集下面的图例，那么你可以使用css：

fieldset, legend {
    padding-top: 50px;
}