CSS Height, Width and Max-width

The CSS height and width properties are used to set the height and width of an element. The max-width property is used to set the maximum width of an element.

1. Height and Width

The height and width properties may take the following values:

• auto: Default. The browser calculates the height and width.
• length: Defines the height/width in px, cm, etc.
• %: Defines the height/width in percent of the containing block.
• initial: Sets this property to its default value.
• inherit: Inherits this property from its parent element.

Note: The height and width values do not include padding, borders, or margins.

2. Max-width

The problem with the width tag occurs when the browser window is smaller than the width of the element. The browser then adds a horizontal scrollbar to the page. Using max-width instead, in this situation, will improve the browser's handling of small windows. This is important when making a site usable on small devices.

3. Min-width and Min-height

• min-width: Defines the minimum width of an element.
• min-height: Defines the minimum height of an element.

div {
  max-width: 500px;
  min-height: 200px;
  background-color: yellow;
}