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?

right click > inspect element. Look at the bottom of the right panel. It will tell you your answer to the first line. Also, please try to avoid floating elements. Use positioning instead — jbutler483, Mar 04 '15 at 16:50
Have a look at: [CSS does the width include the padding?](http://stackoverflow.com/questions/4698054/css-does-the-width-include-the-padding) — Hashem Qolami, Mar 04 '15 at 16:52

score 10 · Answer 1 · answered Mar 04 '15 at 16:53

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.

Or `padding-box` if border should not be included. – Hashem Qolami Mar 04 '15 at 16:55 — Hashem Qolami, Mar 04 '15 at 16:55

GabrielSNM · Answer 2 · 2015-03-04T16:51:55.670

0

The padding is added to the final size of the element.

(10px + 720px + 10px) + (10px + 240px + 10px) = 1000px

enter image description here

edited Mar 04 '15 at 16:51

answered Mar 04 '15 at 16:49

GabrielSNM

351
2
8

CSS padding is take space outside

2 Answers2