Loading

Max-Width

  • In CSS, you can set the maximum width of an element using the max-width property. The max-width property specifies the maximum width of an element can have, preventing it from growing larger than the specified value.
  • This is particularly useful for responsive web design, as it helps control the layout of your web page on different screen sizes and devices.

Syntax:

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

The values of CSS property are defined as:

  • none: In CSS, if you want an element to have no maximum width and to be able to grow to the full width available to it, you can use the none value. 
  • length: The length value specifies the length of max-width in pixels, centimetres, pt, etc.
  • initial: It sets the default value.
  • inherit: It is used to inherit the property from its parent.

Example:

  • In the below example, there are 4 paragraph elements with the content.
  • we use the max-width property to set the maximum width of a paragraph.
  • first paragraph maximum width is 175px,and second paragraph maximum width is 20em,third paragraph 350pt and 4th paragraph is 10cm.
  • The content of the first paragraph is larger than the value of the max-width property, so in the output, as a result, the height of the first paragraph changed automatically.
<!DOCTYPE html> 
<html> 

<head> 
    <title> 
        max-width property 
    </title> 

    <style>
        p {
            border: 4px solid blue;
            background-color: lightblue;
            font-size: 20px;
        }

        #px {
            max-width: 175px;
        }

        #em {
            max-width: 20em;
        }

        #pt {
            max-width: 350pt;

        }

        #cm {
            max-width: 10cm;

        }
    </style> 
</head> 

<body> 
    <h2> max-width: 175px; </h2> 
    <p id = "px"> 
        Hi, Welcome to the javaTpoint.com. This site is developed so that students may learn computer science related technologies easily. The javaTpoint.com is always providing an easy and in-depth tutorial on various technologies. No one is perfect in this world, and nothing is eternally best. But we can try to be better. 
    </p> 
    <h2> max-width: 20em; </h2> 
    <p id = "em"> 
        Hi, Welcome to the javaTpoint.com. This site is developed so that students may learn computer science related technologies easily. The javaTpoint.com is always providing an easy and in-depth tutorial on various technologies. No one is perfect in this world, and nothing is eternally best. But we can try to be better. 
    </p> 
    <h2> max-width: 350pt; </h2> 
    <p id = "pt"> 
        Hi, Welcome to the javaTpoint.com. This site is developed so that students may learn computer science related technologies easily. The javaTpoint.com is always providing an easy and in-depth tutorial on various technologies. No one is perfect in this world, and nothing is eternally best. But we can try to be better. 
    </p> 
    <h2> max-width: 10cm; </h2> 
    <p id = "cm"> 
        Hi, Welcome to the javaTpoint.com. This site is developed so that students may learn computer science related technologies easily. The javaTpoint.com is always providing an easy and in-depth tutorial on various technologies. No one is perfect in this world, and nothing is eternally best. But we can try to be better. 
    </p> 

</body> 

</html>

Output: