看这个：
< 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;
}
解决方法
因为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).
