Question

Setting width/height in CSS only corresponds to the content area. Is there a way to set the offset width/height (i.e. dimensions including padding/margin/borders) of an element in CSS?

EDIT: Example ->

I have a number of divs tagged with css class “smallBox”

.smallBox{
width: 100px;
height: 100px;
}

Now I want to set the padding individually on each box, while having the overall outer dimensions stay the same.

Answer 1

Strictly speaking, sort of. You can change the box model used with the proposed box-sizing CSS3 property, such that the width specifies the total width of the object. Details can be found here (http://www.quirksmode.org/css/box.html).

However, browser compatibility is iffy (the article only mentions IE8+ and Firefox), so you will likely need to use JavaScript of some kind to achieve this.