页面顶部顽固空白问题求助

问题原因 #

你遇到的顶部空白是因为HTML代码里存在两个<body>标签。浏览器解析错误的HTML结构时，会自动调整DOM树，这就产生了无法直接通过审查元素定位的空白区域——这是新手容易犯的结构错误，和Bootstrap本身的默认样式无关。

修复步骤 #

1. 删除多余的第二个<body>标签以及对应的</body>结束标签
2. 把原本在第二个<body>里的所有内容，移到第一个<body>标签内部，放在侧边栏代码的后面

修正后的完整HTML代码 #

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>PeePoo</title>
  <link rel="stylesheet" href="style.css">
  <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
  <script defer src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
</head>

<body>
  <div class="btn">
    <span class="fas fa-bars"></span>
  </div>
  <nav class="sidebar">
    <div class="text">
      Side Menu
    </div>
    <ul>
      <li class="active"><a href="#">Dashboard</a></li>
      <li>
        <a href="#" class="feat-btn">Features
             <span class="fas fa-caret-down first"></span>
             </a>
        <ul class="feat-show">
          <li><a href="#">Pages</a></li>
          <li><a href="#">Elements</a></li>
        </ul>
      </li>
      <li>
        <a href="#" class="serv-btn">Services
             <span class="fas fa-caret-down second"></span>
             </a>
        <ul class="serv-show">
          <li><a href="#">App Design</a></li>
          <li><a href="#">Web Design</a></li>
        </ul>
      </li>
      <li><a href="#">Portfolio</a></li>
      <li><a href="#">Overview</a></li>
      <li><a href="#">Shortcuts</a></li>
      <li><a href="#">Feedback</a></li>
    </ul>
  </nav>
  <script>
    $('.btn').click(function() {
      $(this).toggleClass("click");
      $('.sidebar').toggleClass("show");
    });
    $('.feat-btn').click(function() {
      $('nav ul .feat-show').toggleClass("show");
      $('nav ul .first').toggleClass("rotate");
    });
    $('.serv-btn').click(function() {
      $('nav ul .serv-show').toggleClass("show1");
      $('nav ul .second').toggleClass("rotate");
    });
    $('nav ul li').click(function() {
      $(this).addClass("active").siblings().removeClass("active");
    });
  </script>

  <!-- 原第二个body内的内容移至此处 -->
  <h2 class="text-center my-5">The Website of Truth</h2>

  <div class="d-flex justify-content-center" role="columnheader">The Code of Justinian, Book 1 Part 1</div>

  <div class="container">
    <div class="justify-content-center">
      1. The Emperors Gratian, Valentinian, and Theodosius to the People of the City of Constantinople.

      We desire that all peoples subject to Our benign Empire shall live under the same religion that the Divine Peter, the Apostle, gave to the Romans, and which the said religion declares was introduced by himself, and which it is well known that the Pontiff Damasus, and Peter, Bishop of Alexandria, a man of apostolic sanctity, embraced; that is to say, in accordance with the rules of apostolic discipline and the evangelical doctrine, we should believe that the Father, Son, and Holy Spirit constitute a single Deity, endowed with equal majesty, and united in the Holy Trinity.

      (1) We order all those who follow this law to assume the name of Catholic Christians, and considering others as demented and insane, We order that they shall bear the infamy of heresy; and when the Divine vengeance which they merit has been appeased, they shall afterwards be punished in accordance with Our resentment, which we have acquired from the judgment of Heaven.

      Dated at Thessalonica, on the third of the Kalends of March, during the Consulate of Gratian, Consul for the fifth time, and Theodosius.
    </div>
  </div>
</body>

额外说明 #

你的CSS代码里，全局*选择器已经设置了margin:0;padding:0，所以不会是默认边距导致的空白。只要修复HTML的结构错误，顶部空白就会消失。

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