如何让HTML5/CSS页面header顶部无留白，占满页面顶部？

这是**外边距折叠（Margin Collapse）**导致的：浏览器默认给<h1>这类块级元素设置了上下外边距，当父元素<header>没有边框、内边距或overflow限制时，子元素的外边距会“溢出”到父元素外面，造成顶部留白。

给你三种可行的解决方法：

• 方法一：移除<h1>的默认外边距
  直接给<h1>设置margin: 0，彻底消除默认外边距带来的影响：

  header h1 {
      margin: 0;
  }
  

• 方法二：给<header>添加内边距/边框
  通过给父元素<header>添加内边距或边框，破坏外边距折叠的触发条件。如果要保持header原高度，记得调整高度值抵消内边距的影响：

  header {
      margin: 0;
      padding: 1px 0; /* 添加上下内边距 */
      background-color: #2972C6;
      width: 100%;
      height: calc(500px - 2px); /* 减去内边距总高度，保持原500px的视觉高度 */
  }
  

• 方法三：给<header>设置overflow: hidden
  利用overflow: hidden限制子元素的外边距不溢出到父元素外：

  header {
      margin: 0;
      padding: 0;
      background-color: #2972C6;
      width: 100%;
      height: 500px;
      overflow: hidden;
  }
  

以下是应用方法一的完整代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Home</title>
    <meta charset="utf-8">
    <style>
        body{
            margin: 0;
            padding: 0;
            background-color:#FDFAF7;
            font-family: Verdana,Arial,sans-serif; 
        }
        header{
            margin: 0;
            padding: 0;
            background-color: #2972C6;
            width: 100%;
            height: 500px;
        }
        header h1 {
            margin: 0; /* 移除h1默认外边距 */
        }
    </style>
</head>
    <body>
        <header> 
            <h1>My Portfolio</h1>
        </header>
    
        <nav>
        </nav>  
        
        <main>
        <div>
        </div>
        </main>
            
        <footer>
            
        </footer>       
    </body>
</html>

内容的提问来源于stack exchange，提问作者ioannis_03