CSS Height and Width

height and width

The height and width properties are used to set the height and width of an element.

The height and width do not include padding, borders, or margins. It sets the height and width of the area inside the padding, border, and margin of the element.

The height property sets the height of an element.

The height of an element does not include padding, borders, or margins!

If height: auto; the element will automatically adjust its height to allow its content to be displayed correctly.

If height is set to a numeric value (like pixels, (r)em, percentages) then if the content does not fit within the specified height, it will overflow. How the container will handle the overflowing content is defined by the overflow property.

Note: The min-height and max-height properties override the height property.

The width property sets the width of an element.

The width of an element does not include padding, borders, or margins!

Note: The min-width and max-width properties override the width property.

height and width Values

• auto - This is default. The browser calculates the height and width
• length - Defines the height or width in px, cm, em, etc.
• % - Defines the height or width in percent of the containing block
• initial - Sets the height or width to its default value
• inherit - The height or width will be inherited from its parent value