Padding adds to div width / height? [duplicate]_问答_开发者

Padding adds to div width / height? [duplicate]

开发者 https://www.devze.com 2023-02-08 09:20 出处：网络

This question already has answers here: 开发者_C百科 Does element width include padding? (5 answers)

相关专题：css

This question already has answers here: 开发者_C百科 Does element width include padding? (5 answers) Closed 7 years ago.

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

Counterintuitive indeed.

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.

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

The width is the width your content can fill, not the width of the box delimited by your border.

Maybe I misunderstood but I think you can solve your problem by using width: auto for the div instead of width: 100%; PS: I know the post is old but maybe still can be useful...