CSS Height, Width and Max-width

In CSS, height and width are properties used to define the dimensions of an element, specifying how tall (height) and wide (width) the element should be. On the other hand, max-width is a property that limits the maximum width an element can have.

This div element has a height of 50 pixels and a width of 100%.

Height

The height property is used to set the height of an element.
It can take various units such as pixels (px), ems (em), percentages (%), etc.

Width

The width property is used to set the width of an element.
Like height, it can take different units.

Example

div{
  height: 100px; /* Set the height to 100 pixels */
  width: 200px; /* Set the width to 200 pixels */
}

You can click on above box to edit the code and run again.

Output

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

This div element has a height of 100px and a width of 200px.

Max-width

The max-width property limits the maximum width an element can have.
It is particularly useful in responsive design to ensure that elements don't become excessively wide on larger screens.

Example

div{
  max-width: 500px; /* Set the maximum width to 500 pixels */
  height: 100px; /* Set the height to 100 pixels */
}

You can click on above box to edit the code and run again.

Output

This <div> element has a height of 100 pixels and a max-width of 500 pixels:

This div element has a height of 100px and a max-width of 500px.

Output

This <div> element has a height of 100 pixels and a max-width of 500 pixels:

In this example, even if the container has more available space, the element won't exceed a width of 500 pixels.

These properties can be used individually or in combination to control the size of elements on a web page. When using both width and max-width, the actual width of the element will be the smaller of the two values, ensuring that it doesn't exceed the maximum width specified by max-width. This is particularly helpful in creating flexible and responsive layouts.