我对 Web 开发非常陌生，我遇到了 CSS 网格的问题，希望社区可以帮助解决它。
我已经使用 CSS 网格创建了一个布局，现在我无法消除网格所有边上不必要的间隙：页眉、页脚、左侧和右侧。请看截图：[ https://prnt.sc/rgcas4][1]
CSS 样式
.grid-container{
display: grid;
grid-template-columns: 11% 55% 23% 11%;
grid-template-rows: auto auto auto;
}
.header-container{
background-image: linear-gradient(to bottom, #008686, #024848);
grid-column: 1 / span 4;
grid-row: 1;
height: 60px;
border: 1px solid black;
}
.left-spacing{
background-color: grey;
grid-column: 1;
grid-row: 2;
margin-top: 15px;
z-index: -1;
height: 800px;
border: 1px solid black;
}
.central-container{
grid-column: 2;
grid-row: 2;
margin-top: 15px;
background-color: seashell;
height: 800px;
border: 1px solid black;
}
.right-menu-container{
grid-column: 3;
grid-row: 2;
margin-left: 15px;
margin-top: 15px;
background-color: steelblue;
height: 800px;
border: 1px solid black;
}
.right-spacing{
background-color: grey;
grid-column: 4;
grid-row: 2;
margin-top: 15px;
z-index: -1;
height: 800px;
border: 1px solid black;
}
.footer-container{
background-color: lightcyan;
grid-column: 1 / span 4;
grid-row: 3;
margin-top: 15px;
height: 300px;
border: 1px solid black;
}
超文本标记语言
<body>
<div class="grid-container">
<div class="header-container">Header</div>
<div class="left-spacing">Left Spacing</div>
<div class="central-container">Center</div>
<div class="right-menu-container">Right Menu</div>
<div class="right-spacing">Right Spacing</div>
<div class="footer-container">Footer</div>
</div>
</body>
我尝试了多种方法来消除间隙，例如：
边距：0px 顶部：0px；
等等，没有任何帮助
提前感谢你的帮助。
宝慕林4294392
相关分类