css - 填充增加了 div 宽度/高度？

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

确实违反直觉。

最佳答案

content-box model声明填充和边框不计入您为框设置的 width。所以他们增加了它的宽度。

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

关于css - 填充增加了 div 宽度/高度？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4879788/