2017-04-01 55 views
1

最重要的是有很多帖子與background-color有關。我已經閱讀了幾篇文章,並試圖通過設置background-size來發布隱藏溢出的各種解決方案。似乎沒有什麼工作.... 我怎樣才能得到background-color覆蓋整個部分?CSS:節標記上的背景顏色不能覆蓋整個寬度?

我有一個非常簡單的M.W.E.如下:

HTML

<body> 
<section> 
    TEST! 
</section> 
</body> 

CSS

body { 
    background-color: coral; 
} 

section { 
    background-color: blue; 
    width: 100%; 
} 

Fiddle

+0

一切正常。你想在節中做什麼? – molikh

+0

刪除那個小填充的? – molikh

回答

1

您需要在身體標記使用margin:auto

片斷如下

body { 
 
    background-color: coral; 
 
    margin:auto; 
 
} 
 

 
section { 
 
    background-color: blue; 
 
    width: 100%; 
 

 
}
<body> 
 
<section> 
 
    TEST! 
 
</section> 
 
</body>

+0

工作正常!謝謝。但爲什麼改變身體會影響該部分?特別是因爲身體的背景顏色已經跨越了整個事物? – SumNeuron

+0

在調整no。因爲寬度爲100%。如果您更改某些屬性,如正文上的字體,那麼子元素可能會繼承。但是你可以通過造型子類來覆蓋父類的這種屬性 – repzero

+0

該部分在體內,因此從身體改變某些屬性可能會或可能不會影響它的子元素...這是一種繼承類的東西與css – repzero

0

的頁面的整個寬度?

您可以重置或消除:

*, html, body { 
    padding: 0px; 
    margin: 0px; 
} 

Updated jsfiddle

0

我會推薦閱讀有關「重新設置CSS」,歸零邊距和填充身體,HTML,P等。它可以解決您的問題。 reset-css