Question

<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>

确实违反直觉。

Answer 1

content-box model表示填充和边框不计入您为框设置的width。所以他们加入了width。

现代浏览器支持CSS3的box-sizing: border-box，使width代表内容，填充和边框的总宽度（当然，默认值为content-box，从而触发上述行为）。

Answer 2

宽度是内容可以填充的宽度，而不是边框分隔的框的宽度。

Answer 3

也许我误解了，但我认为您可以使用width: auto代替width: 100%来解决您的问题; PS：我知道这篇文章很老但可能仍然有用......

填充增加div宽度/高度？

3 个答案: