CSS height and width property defines the width and height of the content area of an element.
It does not include paddings, borders, or margins.
The width and height property values are as follows:
- auto - This is a default. it is used to calculate the width and height.
- length - It is used to defines the height/width in px, cm, etc.
- % - Defines the height/width of the containing block in percentage(%).
- inherit - It is used to inherit the height/width property from its parent element.
- initial - It is used to sets the height/width to its default value
The max-height Property
The max-height property is used to set the maximum content height of a box. The maximum height does not include paddings, borders, or margins.
An element that has max-height applied will never be larger than the value specified, even if the height property is set to something larger. For example, if the height is set to 150px and the max-height set to 200px, the actual height of the element is 150px.
Note: There is an exception to this rule, if the min-height property defines a value that is greater than that of max-height property, in this case, the min-height value will be applied.
The min-height Property
The min-height property is used to specify the minimum content height of a block. The min-height doesn’t include paddings, borders, or margins.
An element to which min-height is set 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.
The max-width Property
The max-width property is used to set the maximum content width of a block. The maximum width does not include paddings, borders, or margins.
An element to which a max-width is set 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 250px and the max-width is set to 150px, the actual width of the element will be 150px.
Note: There is an exception to this rule, if the min-width property defines a value that is greater than that of max-width property, in this case, the min-width value will be applied.
The min-width Property
The min-width property is used to specify the minimum content width of a block. The min-width does not include paddings, borders, or margins.
An element to which min-width is set will never be narrower than the minimum width specified. For example, if the width is set to 200px and the min-width is set to 250px, the actual width of the element is 250px.