/    /  CSS max-width

CSS max-width

 

This CSS property defines the maximum width of the content area of an element. max-width does not include padding, borders, or margins

 

Syntax:

 

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

 

Property Values:

 

  • none: Does not limit the width of the content box.
  • length: The length of max-width in px, cm, pt, etc.
  • initial: The property to its default value.
  • inherit: The property from its parent element.

 

Example:

 

<!DOCTYPE html>
<html>
<head>
<title>
max-width property
</title>

<style>
p{
border: 4px solid red;
background-color: lightblue;
font-size: 20px;
}
#px {
max-width: 175px;
}
#em {
max-width: 20em;
}

</style>
</head>
<body>
<h2> max-width: 175px; </h2>
<p id = "px">
Hi, Welcome to the I2tutorials. Enter content here.Enter content here.Enter content here.Enter content here.Enter content here.Enter content here.Enter content here.Enter content here.Enter content here.
</p>
<h2> max-width: 20em; </h2>
<p id = "em">
Hi, Welcome to the I2tutorials. Enter content here.Enter content here.Enter content here.Enter content here.Enter content here.Enter content here.Enter content here.Enter content here.Enter content here.Enter content here.Enter content here.
</p>

</body>
</html>

 

OUTPUT:

 

CSS max-width