CSS padding is take space outside

Question

If i'm not mistaken, padding value take space inside the actual border and margin value take space outside actual border, right?

So, if i'm correct, this CSS setting:

.something { width: 400px; padding: 10px; border: 0; }

will stay in 400px width.

So, if I have settings like this:

*             { margin: 0; padding 0; border: 0px; }
.main-wrapper { width: 960px; }
.main-section { width: 720px; padding: 10px; float: left; }
.sidebar      { width: 240px; padding: 10px; float: left; }
.footer       { clear: both; }

As far as I know, the actual width for .main-section will be 700px and with 20px padding left and right. And, the actual width for .sidebar will be 220px with 20px padding left and right. So, the total width will be exactly the same as main-wrapper width. Like this:

(10px + 700px + 10px) + (10px + 220px + 10px) = 960px //.main-wrapper width

What I don't get it is, why the .sidebar can't sit right in the .main-wrapper's right side? It's like padding value is taking space outside the border. So the .main-wrapper can't fit it's contents and then the .sidebar is running away ...

Why this happens?

Answer 1

The initial value of box-sizing is content-box. That means

The width and height properties are measured including only the content, but not the padding, border or margin.

Instead, you may try box-sizing: border-box:

The width and height properties include the padding and border, but not the margin.

There is also box-sizing: padding-box, but it isn't supported by all browsers

The width and height properties include the padding size, and do not include the border or margin.