CSS Dimension
CSS dimension properties used to control the height and width of an element.
CSS Dimension Properties
The CSS provides several properties such as width, height, max-width and max-height etc. that allows you to control the dimension of a box. The following section will describe you how to use these properties to create a better web page layout.
The width and height Properties
The width and height property defines the width and height of the content area of an element. This width and height does not include paddings, borders, or margins. See the CSS box model to know how the effective width and height is calculated.
The width and height property can take values of a length (px, pt, em, etc.), a percentage, or the keyword auto. Negative length values are not allowed.
Example
Try this code »div {
width: 300px;
height: 200px;
}This style rules assigns a fixed width of 300 pixels and height of 200px to the <div> element.
Note: The special auto value allows the browsers to calculate the width automatically for the specified element. The percentage (%) values refer to the width of the element's containing block.
The max-height Property
The max-height property allows you to specify the maximum content height of a box. This maximum height does not include paddings, borders, or margins.
An element that has max-height applied will never be taller than the value specified, even if the height property is set to something larger. For example, if the height is set to 200px and the max-height set to 100px, the actual height of the element is 100px.
Example
Try this code »div {
height: 200px;
max-height: 100px;
}The max-height property is usually used in conjunction with the min-height property to produce a height range for the element concerned.
Note: There is an exception to this rule — if the min-height property is specified with a value that is greater than that of max-height property, in this case the min-height value will in fact be the one that's applied.
The min-height Property
The min-height property allows you to specify the minimum content height of a block. This minimum height doesn't include paddings, borders, or margins.
An element to which min-height is applied will never be smaller than the minimum height specified. For example, if the height is set to 200px, and the min-height is set to 300px, the actual height of the element is 300px.
Example
Try this code »div {
height: 200px;
min-height: 300px;
}The min-height property is usually used in conjunction with the max-height property to produce a height range for the element concerned.
Note: The min-height property is usually used to ensure that an element has at least a minimum height even if no content is present. However the element will be allowed to grow normally if the content exceeds the minimum height set.
The max-width Property
The max-width property allows you to specify the maximum content width of a block. This maximum width does not include paddings, borders, or margins.
An element to which a max-width is applied will never be wider than the value specified even if the width property is set to something larger. For example, if the width is set to 300px and the max-width is set to 200px, the actual width of the element will be 200px.
Example
Try this code »div {
width: 300px;
max-width: 200px;
}The max-width property is often used in conjunction with the min-width property to produce a width range for the element concerned.
Note: There is an exception to this rule; if the min-width property is specified with a value greater than that of max-width property, in this case the min-width value will in fact be the one that's applied.
The min-width Property
The min-width property allows you to specify the minimum content width of a block. This minimum width does not include paddings, borders, or margins.
An element to which min-width is applied will never be narrower than the minimum width specified. For example, if the width is set to 300px and the min-width is set to 400px, the actual width of the element is 400px.
Example
Try this code »div {
width: 300px;
min-width: 400px;
}The min-width property is often used in conjunction with the max-width property to produce a width range for the element concerned.
Note: The min-width property is usually used to ensure that an element has at least a minimum width even if no content is present. However the element will be allowed to grow normally if its content exceeds the minimum width set.
