样式不会通过CSS网格中的装订线显示

Question

I have a layout I've created using CSS Grid. My body element has a different background color than the actual sections of the grid. I would like this color to show through the "gutters" I have created in my grid using margin . I've linked a fiddle of this problem:

body {
  background: #f00;
  margin: 0;
}

#page {
  display: grid;
  width: 100%;
  height: 100%;
  grid-template-areas: "header header" "navigation content" "footer footer";
  grid-template-columns: 200px auto;
  grid-template-rows: 15% 75% 10%;
  background: #fff;
}

#page>* {
  border: 1px solid #000;
  padding: 10px;
  margin: 5px;
}

#page>header {
  grid-area: header;
}

#page>nav {
  grid-area: navigation;
}

#page>main {
  grid-area: content;
}

#page>footer {
  grid-area: footer;
}

<section id="page">
  <header>
    <h1>Header</h1>
  </header>
  <nav>
    <h1>Navigation</h1>
  </nav>
  <main>
    <h1>Content</h1>
  </main>
  <footer>
    <h1>Footer</h1>
  </footer>
</section>

Fiddle

Answer 1

You could also achieve this using the Outline property:

#page > * {
    border: 1px solid #000;
    padding: 10px;
    outline: 5px solid #f00;
    margin: 5px;
}

Answer 2

You're making the entire background of the #page section white. To have the red show, the white needs to apply only to the interior of the children of #page . Move the background style from #page to #page > * , like so:

#page {
  display: grid;
  width: 100%;
  height: 100%;
  grid-template-areas: "header header"
                       "navigation content"
                       "footer footer";
  grid-template-columns: 200px auto;
  grid-template-rows: 15% 75% 10%;
}

#page > * {
  border: 1px solid #000;
  padding: 10px;
  margin: 5px;
  background: #fff;
}