CSS Height and Width

The width of this element is 100%.

CSS Set Height and Width

height and width The property is used to set the height and width of an element.

The height and width properties do not include padding, border, or margin. They set the height or width within the padding, border, and margin of the element.

CSS Height and Width Values

height and width The property can be set to the following values:

  • auto - Default. The browser calculates the height and width.
  • length - Define height/width using px, cm, etc.
  • % - Define height/width in terms of the percentage of the containing block.
  • initial - Set height/width to the default value.
  • inherit - Inherit height/width from its parent value.

CSS Height and Width Example

The height of this element is 200 pixels, and the width is 50%

Example

Set the height and width of the <div> element:

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

Try it yourself

The height of this element is 100 pixels, and the width is 500 pixels.

Example

Set the height and width of another <div> element:

div {
  height: 100px;
  width: 500px;
  background-color: powderblue;
}

Try it yourself

Note:Remember thatheight and width The property does not include padding, border, or margin! They set the height/width within the padding, border, and margin of the element!

Set max-width

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

can be specified using length values (such as px, cm, etc.) or the percentage of the containing block (%), or it can be set to none (the default value. It means there is no maximum width).

When the browser window is smaller than the width of the element (500px), the previous <div> issue. Then, the browser will add a horizontal scrollbar to the page.

In this case, use max-width Can improve the browser's handling of small windows.

Tip:Drag the browser window to a width less than 500px to see the difference between the two divs!

The height of this element is 100 pixels, and the maximum width is 500 pixels.

The height of this element is 100 pixels, and the maximum width is 500 pixels.

Note:max-width The value of the property will override width(Width).

Example

The height of this <div> element is 100 pixels, and the maximum width is 500 pixels:

div {
  max-width: 500px;
  height: 100px;
  background-color: powderblue;
}

Try it yourself

More examples

Set the height and width of an element
This example demonstrates how to set the height and width of different elements.
Set the height and width of an image using percentages
This example demonstrates how to set the height and width of an image using percentage values.
Set the minimum and maximum width of an element
This example demonstrates how to set the minimum and maximum width of an element using pixel values.
Set the minimum and maximum heights of the element
This example demonstrates how to set the minimum and maximum heights of an element using pixel values.

Set CSS Dimension Properties

Property Description
height Set the height of the element.
max-height Set the maximum height of the element.
max-width Set the maximum width of the element.
min-height Set the minimum height of the element.
min-width Set the minimum width of the element.
width Set the width of the element.