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;
}

Answer 2

只需在＃welcome-section 的CSS内添加height: 100%;而不是height: 100vh;：

.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: 100%;
        margin: auto;
        background: black;
        grid-area: welcome-section;
      }
      #projects {
        background: PaleTurquoise;
        grid-area: projects;
      }

      #footer {
        background: lightpink;
        grid-area: footer;
      }

<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>

网格布局周围多余的边距

2 个答案: