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.
width and height
The
width and height of an element’s content area can be set with the width and height properties. These two properties can be assigned with either a length or a percentage value, where the percentage is relative to the parent element’s dimensions.
width | height : auto | <length> | <percentage>
A block element normally stretches out to the edges of its container. In contrast, the element’s height collapses to fit its content. With the width and height properties, these default behaviors can be changed. In the following example, elements applying the class have a width of 100 pixels and a height of 50 pixels. After the dimensions have been set like this, the element keeps that size, no matter how the page is resized.
.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.
min-width | min-height : <length> | <percentage>
Valid values for these properties are lengths and percentages, where percentage is relative to the dimensions of the containing block. For example, the following class makes an element take up at least half of the available width and height:
.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.
max-width | max-height : none | <length> | <percentage>
By setting both the maximum and minimum width, you can define an interval for the way the width of an element can vary. A block element using the following class expands to fill 500 pixels if it can. When horizontal space is limited, the element is allowed to shrink down to no fewer than 200 pixels.
.mybox {
max-width: 500px;
min-width: 200px;
}
The max-width property has priority over min-width. However, it is the other way around with the height properties because min-height has priority over max-height. Thus, an element using the following class has a height of 5 em, unless its content requires more height. In that case, the element expands vertically up to its maximum allowed value of 20 em.
.mybox {
max-height: 20em;
min-height: 5em;
}
Keep in mind that the fixed width and height properties should not be used together with the min- and max- properties. The four min- and max- properties are supported by all major browsers, including Chrome 1+, Firefox 1+, Safari 1+, Opera 8+, and IE 7+. They are popularly used together with media rules for creating fluid layouts that work well across different screen sizes.
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.
/* 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.
box-sizing : content-box | border-box
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.
/* 100 pixel wide element */
.mybox {
box-sizing: border-box;
padding: 3px;
border: 2px solid red;
width: 100px;
}
The border-box property.
does not inherit, but it can be applied to all elements on the website using the universal selector. To increase browser support, the -webkit and -moz prefixes can be used.
/* Use border-box for all elements */
* {
/* Chrome 1-8, Safari 3-5 */
-webkit-box-sizing: border-box;
/* Firefox 1-28*/
-moz-box-sizing: border-box;
/* Chrome 9+, Firefox 29+, Safari 5.1+, Opera 9.5+, IE 8+ */
box-sizing: border-box;
}
Browser support for the box-sizing property has become good enough that all major browsers now support it. As such, many websites employ this property to simplify the grid calculations for their layouts.