0

This is my cut down code: http://jsfiddle.net/rCBL9/

I want to put padding: 10px; so I have a 10px spacing on the inside of the white boxes, but when I add this it makes the outside of the white boxes bigger.

How can add a 10px spacing on the inside of the white boxes without making them larger?

Jimmy
  • 12,087
  • 28
  • 102
  • 192

2 Answers2

2

By using box-sizing: border-box; you will get the result you desire.

.left { padding: 10px; box-sizing: border-box;  }

Also, unlike other poster, I'll give credit to previous poster, found here;

keep padding from making the element bigger?

Community
  • 1
  • 1
MrMarlow
  • 856
  • 4
  • 17
1

You can do that by giving the elements a box-sizing:border-box; which changes the way the CSS box model is calculated.

Basically, the width/height of any element is the specified width/height plus any margins, paddings and borders. When you change the box-sizing of an element to "border-box", all the extra widths (the borders/margins/paddings) are deducted from the specified width/height.

Here is a good read about how the box-model works: http://css-tricks.com/the-css-box-model/

I updated the fiddle for you: http://jsfiddle.net/rCBL9/2/

HaukurHaf
  • 13,522
  • 5
  • 44
  • 59