我有一个使用 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>
最佳答案
您还可以使用 Outline
属性实现此目的:
#page > * {
border: 1px solid #000;
padding: 10px;
outline: 5px solid #f00;
margin: 5px;
}
关于html - 主体样式未通过 CSS 网格中的排水沟显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46287358/