CSS - max-width



The max-width property is used to set an upper bound on the width of an element.

Possible Values

  • none − There is no limit to the width of the element.

  • <length> − Any length unit. The element can never have a value for width which exceeds this distance.

  • <percentage> − Limits the element's width to the percentage of the width of the containing block.

  • initial − Sets the value of max-width to its default value.

  • inherit − The value of max-width is inherited from its parent value.

Applies to

All the HTML elements except non-replaced inline elements and table elements.

DOM Syntax

object.style.maxWidth = "50px"

CSS max-width - <length> Value

The following example demonstrates max-width: 100px property sets the maximum width of an element to 100px −

<html>
<head>
<style>
   p {
      max-width:100px;
      height:200px;
      border:4px solid #0000ff;
      padding:5px;
      margin:10px;
   }
</style>
</head>
<body>
   <p>
      This paragraph is 200px high and max-width is 100px
      Hence the border is not covering the entire text and
      there is some part of text outside the border. This is
      due to the max-width value set for p tag.
   </p>
</body>
</html>

CSS max-width - With Different Value

Here is another example demonstrating usage of different types of values in max-width property −

<html>
<head>
<style>
   div.a {
      border: 2px solid red;
      max-width: 200px;
      width: 400px;
      overflow: auto;
      margin-bottom: 4px;
   }
   div.b {
      border: 2px solid blue;
      max-width: 40%;
      overflow: auto;
      margin-bottom: 4px;
   }
   div.c {
      border: 2px solid red;
      max-width: none;
      width: 400px;
      overflow: auto;
      margin-bottom: 4px;
   }
</style>
</head>
<body>
   <div class="a">
      <h2>max-width: 200px and width:400px</h2>
      <p>The <i>max-width</i> property allows you to specify maximum width of a box. Here the max-width is 200px less than the width which is 400px.</p>
   </div>
   <div class="b">
      <h2>max-width: 40%</h2>
      <p>The <i>max-width</i> property allows you to specify maximum width of a box. Here the max-width is 40%.</p>
   </div>
      <div class="c">
      <h2>max-width: none (default):</h2>
      <p>The <i>max-width</i> property allows you to specify maximum width of a box. Here the max-width is none.</p>
   </div>
</body>
</html>
Advertisements