如何摆脱空白[重复]答案

【问题标题】：How to get rid of the white space [duplicate]如何摆脱空白[重复]
【发布时间】：2022-01-13 00:19:56
【问题描述】：

我目前正在创建一个测试站点，但不断在屏幕的顶部和右侧出现白色边框：Example。我试过使用：position: fixed，但没有用。这是我的代码：

.Main-Header {
  font-size: 60px;
  font-family: Garamond, Serif;
  color: #818181;
  background-color: #111;
  margin: 0px 0px 0px 120px;
  padding-left: 20px;
  padding-top: 0px;
  border-top: 0px;
}

.sidenav {
  height: 100%;
  width: 130px;
  position: fixed;
  top: 0px;
  left: 0px;
  background-color: #111;
  padding-top: 25px;
}

.sidenav a {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 28px;
  color: #818181;
  display: block;
}

.sidenav a:hover {
  color: #f1f1f1;
}

.main {
  margin-left: 130px;
  padding: 0px 10px;
}

@media screen and (max-height: 450px) {
  .sidenav {
    padding-top: 15px;
  }
  .sidenav a {
    font-size: 18px;
  }
}

.pic1 {
  padding-left: 30px;
  padding-bottom: 15px;
}

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

<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>Test 1</title>
  <link rel="stylesheet" href="test.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<body>
  <h1 class="Main-Header"><em>Test Site</em></h1>

  <div class="sidenav">
    <div class="pic1"><a class="active" href="test.html"><i class="fa fa-home"></i></a></div>
    <a href="index.html">About</a>
    <a href="#">Services</a>
    <a href="#">Clients</a>
    <a href="#">Contact</a>
  </div>

  <div class="main">
    <br>
    <p><a href="index.html">index</a></p>
  </div>


</body>

</html>

【问题讨论】：

标签： html css

【解决方案1】：

添加以下 CSS 规则：

body {
  margin: 0;
}

更多详情请见this answer。

【讨论】：

【解决方案2】：

添加基本的 CSS 重置通过添加 -

* {
    margin: 0px;
    padding: 0px;
}

默认情况下，CSS 会添加 16px 的边距和内边距，通过添加上述 CSS 会移除 16px 的边距和内边距

【讨论】：