In this section, we will learn what the max-width property is and how to use it in CSS.

CSS max-width Property Definition and Usage

The `max-width` property is used to set a limit on the maximum width of an element.

Basically using this property, we can set a limit on the maximum width that an element can have.

Note: again, using the max-width property won’t fix the width of an element! This property just put a limit on the maximum width that an element can have! If you want to fix the width of an element, use the width property, then.

CSS max-width Property Syntax

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

CSS max-width Property Value

The value we set for this property is a number with any relative or absolute units supported in CSS.

For example, if we set the value 10vw for this property, that means the max-width is 10 percent of the viewport’s width.

If you used % value for this property, be aware that the percentage is based on the width of the parent of the target element.

That means if we set the value of the max-width property for an element to 40% for example, then the value of the max-width property becomes 40% width of its parent element.

Note: the two global values “initial” and “inherit” can also be used as the value of this property.

Note: the default value is set to none. This means there’s no limit on the maximum width of an element by default.

Example: HTML max-width

See the Pen HTML max-width by Enjoy Tutorials (@enjoytutorials) on CodePen.