CSSグリッドでガッタを通してボディスタイルが表示されない

Question

私はCSSグリッドを使って作成したレイアウトを持っています。私のbody要素は、グリッドの実際のセクションとは異なる背景色を持っています。私はmarginを使ってグリッドに作成した「溝」を通してこの色を表示したいと思います。あなたはまた、Outlineプロパティを使用してこれを実現することができ

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

：

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

Answer 2

あなたは全体を作っている私は、この問題のフィドルをリンクしました#pageセクションの背景は白です。赤いショーをするには、白は#pageの子供の内部にのみ適用する必要があります。 ``＃のpage`に、あなたがコメントアウトCSSのコメントを外し、それはそれを修正しません。#FFF：あなたは `背景を削除した場合

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