我對 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;等等,沒有任何幫助提前感謝你的幫助。
CSS 網格:消除不必要的間隙
慕婉清6462132
2023-09-11 14:47:22