Max-width

We will learn about CSS max-width property in this chapter.

CSS max-width property sets the maximum width of an element. By using this property, we prevent the width property's value from becoming larger than the value specified for max-width.

Meanwhile, we must know that CSS max-width property overrides width property and CSS min-width property overrides CSS max-width property.

CSS Syntax

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

Let's see an example:

<!DOCTYPE html>
<html>
   <head>
      <style>
         div {
                max-width: 5cm;
                background-color: orange;
          }
       </style>
   </head>
   <body>

       <div>We set maximum width of this text as 5 cm.</div>

   </body>
</html>

Here the result is:



Property Values

Value Descriptions
none It means that there is no maximum width. It is the default value of this property.
length It defines maximum width in px, pt, cm, etc.
% It defines maximum width in percent of the containing element.
initial It makes the property use its default value.
inherit It inherits the property from its parents element.