2011-02-02 128 views
8
<html> 
<head> 
<style> 
    * { margin:0; border:0; padding:0; } 
    div { height:500px; } 
    #container { width:1000px; background-color:#000; } 
    #column-one { float:left; padding:10px; width:500px; background-color:#234; } 
    #column-two { float:left; padding:10px; width:500px; background-color:#345; } 
</style> 
</head> 
<body> 
<div id="container"> 
    <div id="column-one"> 
    </div> 
    <div id="column-two"> 
    </div> 
</div> 
</body> 
</html> 

的確有違直覺。填充添加到div寬度/高度?

+0

err有沒有問題?而什麼瀏覽器(IE是臭名昭着的,它有一個「破」箱模型)。 – Sean 2011-02-02 21:00:29

+0

所有瀏覽器在元素寬度/高度處添加填充,邊距和邊框 – jennyfofenny 2011-02-02 21:10:38

回答

23

content-box model指出填充和邊框不計入您爲框設置的width。所以他們加入到width

現代瀏覽器支持CSS3的box-sizing: border-box,導致width表示內容,填充和邊框的總寬度(當然,默認值是content-box,會觸發上述行爲)。

1

寬度是您的內容可以填充的寬度,而不是由邊框分隔的框的寬度。

0

也許我誤解了,但我認爲你可以通過使用width: auto而不是width: 100%來解決你的問題; PS:我知道帖子是舊的,但也許仍然可以是有用的...