CODEWITHSUNDEEP
css
Konrad Viltersten
Konrad Viltersten

Reputation: 39118

Why does padding affect the outer size?

I arrived at the following look.

enter image description here

Noticing that the text is placed above the green markers, I decided to add some inner padding to the three pinkish containers. When I've done as I'd decided, it came up like this, to my greatest surprised and disappointment.

enter image description here

Why is the outer size affected by the inner padding?! I've padded boxes when shipping stuff. They don't get bigger just because I put those white thingies inside to protect the contents! I just get less space inside...

Does it have to do with the strange spacing between my DIV's? I can't get rid of these neither...

Upvotes: 0

Views: 149

Answers (2)

Alfred Larsson
Alfred Larsson

Reputation: 1349

Box-sizing is a CSS3 property you can use to get the padding to affect the inside of the element.

It can be useful to have the padding to affect the outside for some reasons but ofcourse padding on the inside should be standard.

Upvotes: 1

Oriol
Oriol

Reputation: 288120

That's the W3C box model:

totalWidth = marginLeft + borderLeft + paddingLeft
             + width
             + paddingRight + borderRight + marginRight
contentWidth = width

Microsoft's one is much more intuitive:

totalWidth = marginLeft + width + marginRight
contentWidth = width - (borderLeft + paddingLeft + paddingRight + borderRight)

To use IE model, you can use CSS3 box-sizing:

*, :before, :after { box-sizing: border-box; }

Also see box-sizing in MDN, and Internet Explorer box model bug in Wikipedia.

Upvotes: 2

Related Questions