How to add padding or border to a DIV and keep width and height?

Question

Is there some way to keep a set width/height for a DIV, and pad the content without the DIV growing? See example below. I want all the boxes to be exactly 140x140.

H

Answer 1

Depending on what browsers you need to support, you could change the box-sizing attribute on these DIVs to be border-box. That will allow you to set a height and a width on each box, without the padding or borders effecting the dimensions you set.

It has been suggested by a few people to set this globally for all elements in a reset because it makes things a lot easier to style (and is arguably a better box-sizing model than the default). To do this, you would use something like:

* {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

More information, including browser support and some general warnings can be found here: http://paulirish.com/2012/box-sizing-border-box-ftw/