html - 网格布局周围不需要的边距

Question

帮助我了解是什么在布局周围创建了边距。我假设这就是网格显示的行为方式？

我尝试了负边距，它对左侧和顶部有效，但在右侧创造了空间。

.container {
        font-size: 1.5em;
        min-height: 300px;
        width: 100%;
        background: LightGray;
        display: grid;
        grid-template-columns: auto;
        grid-template-rows: auto 1fr auto;
        grid-template-areas:
          "welcome-section"
          "projects"
          "footer";
      }
      #welcome-section {

        width: 100%;
        height: 100vh;
        margin: auto;
        background: black;
        grid-area: welcome-section;
      }
      #projects {
        background: PaleTurquoise;
        grid-area: projects;
      }

      #footer {
        background: lightpink;
        grid-area: footer;
      }
    </style>

    <div class="container">

      <div id="welcome-section">
        <h1></h1>
      </div>

      <div id="projects">
        <div class="project-tile"></div>
        <div class="project-tile"></div>
      </div>

      <div id="footer"></div>

    </div>

Answer 1

它是 body 标签。默认情况下它有边距。

尝试:

Body{
  margin: 0;
}