参见英文答案 >
CSS does the width include the padding?5个
<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>
确实违反直觉.
解决方法
content-box model声明填充和边框不计入您为框设置的宽度.所以他们加上它的宽度.
现代浏览器支持CSS3的box-sizing: border-box,使宽度代表内容,填充和边框的总宽度(默认情况下,内容框,触发上述行为).
