填充会增加div的宽度/高度吗？ [英] Padding adds to div width / height?
本文介绍了填充会增加div的宽度/高度吗？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
<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>
确实具有反直观性。
推荐答案
内容框模型指出，填充和边框不计入您为盒子设置的宽度。因此，它们增加了 width 的宽度。
The content-box model states that padding and borders don't count in the width that you set for a box. So they add on to its width.
现代浏览器支持CSS3的 box-sizing：border-box 导致 width 表示内容，填充和边框的总宽度（默认为 content-box ，触发上述行为）。
Modern browsers support CSS3's box-sizing: border-box to cause width to represent the total width of content, padding and borders (the default is, of course, content-box, triggering the above behavior).
这篇关于填充会增加div的宽度/高度吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
