CSS：主要內容應該有背景顏色

我正在製作一個通用的頁眉和頁腳，它將在所有HTML頁面中使用。我的頁面有白色頁眉和白色頁腳，並且主體是灰色的。現在，我的工作要求，以如下實現： CSS：主要內容應該有背景顏色

我取得了什麼至今如下：

我不知道爲什麼我在兩側獲得這些白條身體標籤。請建議，我的代碼如下。

main { 
 
    background-color: lightgrey; 
 
    padding: 50px; 
 
} 
 

 
header { 
 
    background-color: white; 
 
    width: 100%; 
 
    height: 50px; 
 
} 
 

 
.content-section { 
 
    background-color: lightgrey; 
 
    width: 100%; 
 
} 
 

 
.logo { 
 
    height: 20px; 
 
    margin: 15px 5px; 
 
    width: 116px; 
 
} 
 

 
.open-card-BG { 
 
    font-weight: 300; 
 
    margin: 0 auto; 
 
    width: 65%; 
 
    padding: 20px 40px; 
 
    object-fit: contain; 
 
    max-width: 325px; 
 
    min-height: 200px; 
 
    border-radius: 5px; 
 
    display: table; 
 
    background-color: white; 
 
    position: relative; 
 
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2); 
 
} 
 

 
.open-card-BG::after { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 30px; 
 
    left: 100%; 
 
    width: 30px; 
 
    height: 30px; 
 
    background: url(../secure.svg) center no-repeat; 
 
    background-size: contain; 
 
}

<header> 
 
    <img class="logo" src="logo.gif" /> 
 
</header> 
 
<main> 
 
    <div class="open-card-BG">main content</div> 
 
</main> 
 
<footer> 
 
    I am footer 
 
</footer>

來源

2017-08-24 Anna

由於一個是假設接受的答案，因爲它是一個真的很好的方法來促進高質量的內容和激勵用戶提供有用的答案你未來的問題，我可以問你爲什麼不這樣做？ – LGSon

順便說一下，此代碼僅適用於Chrome嗎？ ...請求是因爲你的代碼在Chrome和Firefox/Edge和IE上呈現不同，並且在IE上完全搞砸了 – LGSon

這是因爲默認的（用戶代理樣式表）的margin瀏覽器上body標籤應用 - 怎麼看白色條紋絕響時，我爲body設置margin: 0 。下面

演示：

body { 
 
    margin: 0; 
 
} 
 

 
main { 
 
    background-color: lightgrey; 
 
    padding: 50px; 
 
} 
 
header { 
 
    background-color: white; 
 
    width: 100%; 
 
    height: 50px; 
 
} 
 
.content-section { 
 
    background-color: lightgrey; 
 
    width: 100%;  
 
} 
 
.logo { 
 
    height: 20px; 
 
    margin: 15px 5px; 
 
    width: 116px; 
 
} 
 
.open-card-BG { 
 
    font-weight: 300; 
 
    margin: 0 auto; 
 
    width: 65%; 
 
    padding: 20px 40px; 
 
    object-fit: contain; 
 
    max-width: 325px; 
 
    min-height: 200px; 
 
    border-radius: 5px; 
 
    display: table; 
 
    background-color: white; 
 
    position: relative; 
 
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2); 
 
} 
 
.open-card-BG::after { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 30px; 
 
    left: 100%; 
 
    width: 30px; 
 
    height: 30px; 
 
    background: url(../secure.svg) center no-repeat; 
 
    background-size: contain; 
 
}

<header> 
 
    <img class="logo" src="logo.gif"/> 
 
</header> 
 
<main> 
 
    <div class="open-card-BG">main content</div> 
 
</main> 
 
<footer> 
 
    I am footer 
 
</footer>

來源

2017-08-24 07:45:54 kukkuz

這就解決了問題:)謝謝 – Anna

在樣式表中添加body{margin:0}。默認情況下，body標籤在大多數主流瀏覽器中的邊距爲8px。

body{ 
 
    margin:0 
 
} 
 
main { 
 
    \t background-color: lightgrey; 
 
    \t padding: 50px; 
 
    } 
 
    header { 
 
    \t background-color: white; 
 
    \t width: 100%; 
 
    \t height: 50px; 
 
    } 
 
    .content-section { 
 
    \t background-color: lightgrey; 
 
    \t width: 100%; \t 
 
    } 
 
    .logo { 
 
    \t height: 20px; 
 
     margin: 15px 5px; 
 
     width: 116px; \t 
 
    } 
 
    .open-card-BG { 
 
    \t font-weight: 300; 
 
    \t margin: 0 auto; 
 
    \t width: 65%; 
 
    \t padding: 20px 40px; 
 
    \t object-fit: contain; 
 
    \t max-width: 325px; 
 
    \t min-height: 200px; 
 
    \t border-radius: 5px; 
 
    \t display: table; 
 
    \t background-color: white; 
 
    \t position: relative; 
 
    \t box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2); 
 
    } 
 
    .open-card-BG::after { 
 
    \t content: ''; 
 
    \t position: absolute; 
 
    \t top: 30px; 
 
    \t left: 100%; 
 
    \t width: 30px; 
 
    \t height: 30px; 
 
    \t background: url(../secure.svg) center no-repeat; 
 
    \t background-size: contain; 
 
    }

<header> 
 
    \t <img class="logo" src="logo.gif"/> 
 
    </header> 
 
    <main> 
 
    \t <div class="open-card-BG">main content</div> 
 
    </main> 
 
    <footer> 
 
    \t I am footer 
 
    </footer>

來源

2017-08-24 07:46:55 aje

這就解決了問題:)謝謝 – Anna

你可以嘗試給main標籤的margin: 0 -10px，可以解決你的問題。

See the fiddle

來源

2017-08-24 07:48:50

，你可以在你的CSS添加以下代碼：