填充增加div宽度/高度?

Sid*_*yer 8 css

<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>
Run Code Online (Sandbox Code Playgroud)

确实违反直觉.

Bol*_*ock 24

内容箱模型指出,填充和边框没有在算width你一个中设置.所以他们加入了它width.

现代浏览器支持CSS3 box-sizing: border-box使得width代表内容,填充和边框的总宽度(当然,默认是content-box触发上述行为).