html - 主体样式未通过 CSS 网格中的排水沟显示

Question

我有一个使用 CSS Grid 创建的布局。我的 body 元素的背景颜色与网格的实际部分不同。我希望这种颜色能够通过我在网格中使用 margin 创建的“间距”来显示。我已经链接了这个问题的 fiddle :

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

您还可以使用 Outline 属性实现此目的:

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