CSS問題：如何防止背景被填充影響？

我有一個簡單的div與它在CSS中定義的背景顏色。有一些文字，我希望在某個位置顯示在這個div，但是當我墊在div它會導致後臺轉移，以及：CSS問題：如何防止背景被填充影響？

#body { 
    margin-left: 10px; 
    background: red; 
}

我只是想文本轉移。我怎樣才能做到這一點，而不使用兩個div標籤？

謝謝。

編輯：這裏是我工作的一個例子：http://jsfiddle.net/qQxF2/

來源

2010-08-16 Delup

這不應該發生！看看http://jsfiddle.net/5MNZJ/ – MvanGeest 2010-08-16 21:23:03

MvanGeest是對的。如果你使用margin而不是padding，會發生這種情況。你在什麼瀏覽器中得到這個結果？你跟別人一起測試過嗎？ w3c會驗證您的網頁嗎？我們可以有更多的代碼嗎？ :) – Sotiris 2010-08-16 21:34:27

http://jsfiddle.net/qQxF2/ – Delup 2010-08-16 21:39:45

如果您還沒有邊框，使用padding，而不是margin。

#body { 
    padding-left: 10px; 
    background: red; /* this is not valid CSS! */ 
    background-color: red; /* this is valid */ 
}

的W3C對the box model廣泛的和（希望）準確的文字之類的東西填充，邊距，邊框等

來源

2010-08-16 21:17:17 MvanGeest

仍然，邊緣區域（10px）會變成白色（或任何繼承的顏色） – 2010-08-16 21:20:30

只要您不觸發MS Internet Explorer中的怪癖模式，W3C文本就是準確的... ;-) – ghoppe 2010-08-16 21:56:07

@Nikita Rybak - 因爲我的回答改變了很多，您的評論沒有任何意義。 @Delup - 我很高興我能幫助你。它只花費我們三個jsFiddle的唯一ID和30分鐘。 :)我祝你好運你的網站。 – MvanGeest 2010-08-16 22:02:17

我通常添加外層div（<div class="outer"><div class="inner">text</div></div>）來解決這個

.outer { 
    background-color: red; 
} 
.inner { 
    padding-left: 10px; 
}

來源

2010-08-16 21:18:13

針對我對答案的評論：你是對的，我誤解了這個問題。但這不應該發生... – MvanGeest 2010-08-16 21:21:36

我害怕我不得不訴諸使用雙div。但你的解決方案似乎是最乾淨的。將選擇這個答案，如果沒有其他可行的解決方案出現。謝謝 – Delup 2010-08-16 21:23:19

@Delup - 我對你的問題發表評論時，你的頁面和jsFiddle有什麼區別？ @Nikita Rybak - 同樣的問題... – MvanGeest 2010-08-16 21:25:24

爲什麼不在實際的身體標籤上設置背景顏色？

body { 
    background-color: red; 
} 

#body { 
    padding-left: 10px; 
}

來源

2010-08-16 21:19:00 pmalmsten

此外，您總是可以將填充應用於文本本身，具體取決於實際上將在容器div中包含多少內容。你真的不想命名div body，因爲這不是很有意思。您可能需要將其更改爲#container或類似的內容，以免造成不良習慣。 body應該是頁面主體，而不是div。

如果你只是將不得不文字，你可以做這樣的事情：

#container { background-color: red; } 
#container p { margin-left: 10xp; }

否則，如果你將擁有的標籤在父DIV的混合物，含量，你不希望（儘管技術上你應該爲了避免習慣於嵌套無關的div），Nikita的答案應該適合你，假設你只想在容器div上使用背景，而不是整個頁面本身。

來源

2010-08-16 21:39:16 Jervis

應用填充不應該改變背景。

當您設置邊距屬性時，它應該移動背景。

嘗試以下...

<html> 
<head> 
<style type="text/css"> 

.padding 
{ 
background-color:yellow; 
padding-left:150px; 
} 

.margin 
{ 
background-color:yellow; 
margin-left:150px; 
} 
</style> 
</head> 

<body> 

<div class="padding">This is a paragraph with padding.</div> 
<br/> 
<div class="margin">This is a paragraph with margin.</div> 

</body> 

</html>

來源

2010-08-16 21:44:42 N30

CSS問題：如何防止背景被填充影響？

回答

相關問題