css - <header> 标签的元素不是从顶部开始的

Question

在下面的代码中，标题标签的内容不是从屏幕顶部开始的，

body {
       margin: 0px; border: 2px solid green; 

}
header {
        
		     width: 100%;
         height: 25vh;
         background-color: gray;
         
         text-align: center;
         margin: 0;
		     padding: 0;
         
      }

<header>
<h1 class="heading"> Syco Scientist Records </h1>

</header>

为什么会这样？现在，如果我为 header 标签设置边框，那么内容将从顶部开始，不留任何空间。

Answer 1

您可以删除 h1 上的边距，或将 padding-top: 1px; 添加到 header 中，或者像我的示例中那样，将 overflow: auto 添加到 header(它实际上可以是除 overflow: visible 之外的任何内容)。

之所以会出现这种情况是因为collapsing margins ，简单来说就是当 2 个元素的边距相遇时，一个取出另一个。

如果边距设置为第一个元素，直接在主体之后或直接在主体之后的父元素内，它会将所有元素向下推该边距并解决这个问题，一个新的 block formatting context需要清除它，因此它的工作方式与 float 几乎相同，需要清除 float 。

body {
  margin: 0px;
  border: 2px solid green;
}
header {
  width: 100%;
  height: 25vh;
  background-color: gray;

  text-align: center;
  margin: 0;
  padding: 0;
  overflow: auto;
}

<header>
  <h1 class="heading"> Syco Scientist Records </h1>
</header>

阅读更多有关崩溃边距的信息

• > CSS: clean solution to the margin collapse issue when floating an element
• > http://www.howtocreate.co.uk/tutorials/css/margincollapsing
• > http://blog.csdn.net/xiongzhengxiang/article/details/7486118
• > https://www.w3.org/TR/CSS21/box.html#collapsing-margins