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 Height and width 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.

The height and width property values take the length (px, pt, em,etc) calculated.

Ex:

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

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 300px and the max-height set to 200px, the actual height of the element is 200px.

Ex:

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

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 300px, and the min-height is set to 400px, the actual height of the element is 400px.

Ex:

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

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 200px and the max-width is set to 100px, the actual width of the element will be 100px.

Ex:

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

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 100px and the min-width is set to 200px, the actual width of the element is 200px.

Ex:

div {width:100px;  min-width:200px; }