html – 为什么我的传奇不尊重父字段集的填充?

看这个:

enter image description here

< fieldset>顶部有50px的填充. <图例>不尊重这一点,但是< 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

因为HTML5规范的 Rendering section说明了这一点

10.3.13 The 07001 and 07002 elements

If the 07001 element has a child that matches the conditions
in the list below, then the first such child is the 07001
element’s rendered legend:

  • The child is a 07002 element.
  • The child is not out-of-flow (e.g. not absolutely positioned or floated).
  • The child is generating a box (e.g. it is not ‘display:none’).

A 07001 element’s 07007, if any, is expected to be rendered over the top border edge of the 07001 element as a ‘block’ box (overriding any explicit ‘display’ value).

相关文章
相关标签/搜索