CSS Height/Width

CSS Height and Width

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

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

Example 1: Setting Height and Width

This element has a height of 200px and a width of 50%.

Example 2: Max-width

The max-width property is used to set the maximum width of an element.

The problem with the width property 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.

Example 3: Min-width

The min-width property is used to set the minimum width of an element.

Example 4: Height and Width Values

The height and width properties may have the following values:

• auto - This is 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 the property to its default value
• inherit - Inherits the property from its parent value

div {
  height: 200px;
  width: 50%;
  background-color: powderblue;
}

p {
  max-width: 100%;
  height: auto;
}