CSS Dimension (Dimension)

CSS dimension properties are used to control the height and width of elements.

CSS Dimension Properties

This CSS provides several properties like 'width', 'height', 'max'-width and 'max'-properties like 'height' allow you to size a Box(盒子). The next section will introduce how to use these properties to create better web layouts.

Width (Width) and Height (Height) Properties

The 'width' and 'height' properties define the width and height of the content area of an element. This width and height do not include padding, border, or margin. SeeCSS box model, 　 to understand how to calculate the effective width and height.

The 'width' and 'height' properties can take length values (such as px, pt, em, etc.), onePercentage, or the keyword 'auto'. Negative length values are not allowed.

div　{
　　　　width:　300px;
　　　　height:　200px;
}

This style rule will300 pixels of fixed width and200 pixels of height are assigned to<div>element.

max-The 'height' maximum height property

max-The 'height' property allows you to specify the maximum content height of a box. This maximum height does not include padding, border, or margin.

max-Even if the 'height' property is set to a larger value, the applied element will not exceed the specified value. For example, if 'height' is set to200px and set its 'max-The height is set to100px, then the actual height of the element is100px.

div　{
　　　　height:　200px;
　　　　max-height:　100px;
}

The max-The 'height' property is usually used with the 'min'-When the 'height' property is used in combination, it produces a height range for the element.

min-The 'height' minimum height property

min-The 'height' property allows you to specify the minimum content height of a block. This minimum height does not include padding, border, or margin.

min-The element applied with height will never be less than the specified minimum height. For example, if the height is set to200px, and the min-The height is set to300px, then the actual height of the element will be300px.

div　{
　　　　height:　200px;
　　　　min-height:　300px;
}

The min-The height property is usually used with the max-The height property is used in conjunction to control the height range of the element.

max-width Maximum Width Property

The max-The width property allows you to specify the maximum content width of a block. This maximum width does not include padding, borders, or margins.

max-Even if the width property is set to a larger value, the element applied with a will not be wider than the specified value. For example, if the width is set to300px, and the max-The width is set to200px, then the actual width of the element will be200px.

div　{
　　　　width:　300px;
　　　　max-width:　200px;
}

The max-The width property is usually used with the min-The width property is used in conjunction to produce information about the width range of the element.

min-width Minimum Width Property

The min-The width property allows you to specify the minimum content width of a block. This minimum width does not include padding, borders, or margins.

min-The width applied to the element will never be narrower than the specified minimum width. For example, if the width is set to300px, and the min-The width is set to400px, then the actual width of the element will be400px.

div　{
　　　　width:　300px;
　　　　min-width:　400px;
}

The min-The width property is usually used with the max-The width property is used in conjunction to produce information about the width range of the element.