CSS Height, Width and Max-width

CSS height and width properties are used to set the height and width of an element, respectively. The values can be specified in units of pixels, ems, or percentages.

For example, height: 100px would set the element's height to 100 pixels, while width: 50% would set the element's width to 50% of the parent element's width.

The CSS max-width property is used to set the maximum width of an element. This can be useful for preventing an element from becoming too wide on larger screens or when the content inside the element is dynamic.

The value can be specified in the same units as width (pixels, ems, or percentages). For example, max-width: 600px would set the maximum width of the element to 600 pixels.

How to use Height, Width and Max-width

Here are some examples of using the height, width, and max-width properties in CSS:

/* Set the height of an element to 200 pixels */
.my-element {
  height: 200px;
}
/* Set the width of an element to 75% of the parent element's width */
.my-element {
  width: 75%;
}
/* Set the maximum width of an element to 600 pixels */
.my-element {
  max-width: 600px;
}

You can use these properties together or separately, for example:

/* Set the height and width of an element to 300 pixels */
.my-element {
  height: 300px;
  width: 300px;
}
/* Set the width of an element to 50% of the parent element's width and max-width to 600 pixels */
.my-element {
  width: 50%;
  max-width: 600px;
}

You can also use min-width, min-height and max-height as well.

Keep in mind that the height and width properties will stretch the element to that size, and the max-width and max-height properties will prevent an element from becoming larger than the specified size.

Height, Width and Max-width Values

The height, width, and max-width properties in CSS can take several different types of values.

  • length values, such as px, em, rem, vh, vw etc. For example, height: 100px, width: 2em, max-width: 75vw.
  • percentage values, such as %. For example, height: 75%, width: 50%, max-width: 25%.
  • auto value, which means the element will automatically size to its content. For example, height: auto, width: auto, max-width: auto.

It's worth noting that for max-width and min-width properties it does not accept negative values and percentage values can only be used with width and height properties.

Examples

Here are some examples of using different types of values with the height, width, and max-width properties:

/* Set the height of an element to 200 pixels */
.my-element {
  height: 200px;
}
/* Set the width of an element to 75% of the parent element's width */
.my-element {
  width: 75%;
}
/* Set the maximum width of an element to 600 pixels */
.my-element {
  max-width: 600px;
}
/* Set the height and width of an element to be the same as the content */
.my-element {
  height: auto;
  width: auto;
}
/* Set the width of an element to be the same as the viewport width */
.my-element {
  width: 100vw;
}
/* Set the maximum height of an element to be the same as the viewport height */
.my-element {
  max-height: 100vh;
}

CSS Basics