HTML and CSS Reference
In-Depth Information
Chapter 20
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.
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>
