亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

CSS 網格:消除不必要的間隙

CSS 網格:消除不必要的間隙

慕婉清6462132 2023-09-11 14:47:22
我對 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;等等,沒有任何幫助提前感謝你的幫助。
查看完整描述

1 回答

?
寶慕林4294392

TA貢獻2021條經驗 獲得超8個贊

以下是您需要添加到 CSS 中的內容:

body {
  margin: 0;
}

或者您可以使用 CSS 頂部的 CSS * 選擇器來重置所有默認邊距和填充:

* {
  margin: 0;
  padding: 0;
}


查看完整回答
反對 回復 2023-09-11
  • 1 回答
  • 0 關注
  • 108 瀏覽

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號