Dimension

The dimension properties control the size of an element, as well as its minimum and maximum dimensions. They do not inherit and can be applied only to block elements and replaced inline elements.

The Height and Width Properties

The height and width properties allow you to set the height and width for boxes. They can take values of a length, a percentage, or the keyword auto.

Example:

.mybox {
width: 100px;
height: 50px;
}

min-width and min-height

The min-width and min-height properties set the minimum dimensions of an element. The element’s width and height still expand to fit the content, but the element does not collapse below the specified minimum dimensions, which does not include padding, borders, or margins. The value of the min-width and min-height property can be a number, a length, or a percentage.

Example:

.half {
min-width: 50%;
min-height: 50%;
}

max-width and max-height

The maximum dimensions of an element’s content area are set with the max-width and max-height properties. They can be set with a length or percentage value, as well as the keyword none to clear a previously set value.

Example:

.mybox {
max-width: 500px;
min-width: 200px;
}

.mybox {
max-height: 20em;
min-height: 5em;
}

box-sizing

The dimension properties normally refer to the content area, not the padding or border area. Therefore, to know the actual width or height that an element occupies in the box model, the surrounding padding and border have to be taken into account.

Example:

/* 100 pixels wide element */
.mybox {
padding: 3px;
border: 2px solid red;
width: 90px;
}

CSS 3 introduced the box-sizing property to allow web developers a choice of how widths and heights are calculated. Its default value is content-box, which means the dimension properties refer only to the content area. The alternative border-box value includes the padding and borders in these measurements.

By changing the box sizing to border-box, you can create a grid layout more easily because you no longer need to take the padding and border sizes into account.

Example:

/* 100 pixel wide element */
.mybox {
box-sizing: border-box;
padding: 3px;
border: 2px solid red;
width: 100px;
}