Skip to main content

CSS max-width

Remember that a block-level element always takes up the full width available (stretches out to the left and right as far as it can).

There are two properties max-width and min-width used to set the maximum and minimum width of the element.

The max-width property in CSS is used to set the maximum width of the element's content box. It means that the width of the content box can be smaller than the max-width value, but cannot be greater.

It sets the upper bound on the element's width.

When the content is larger than the maximum width, then it will automatically change the height of the element. If the content is smaller than the max-width, this property has no effect. This property ensures that the value of width property cannot be greater than the value of max-width property. It does not allow negative values.

Syntax​

max-width: none | length | initial | inherit;

The values of this CSS property are defined as follows:

  • none: It is the default value that does not limit the width of the content box.
  • length: This value defines the length of max-width in px, cm, pt, etc.
  • initial: It sets the property to its default value.
  • inherit: It inherits the property from its parent element.

Table of Contents