max-width - HTML CSS CSS Property

HTML CSS examples for CSS Property:max-width

  1. HOME
  2. HTML CSS
  3. CSS Property
  4. max-width

Description

The max-width CSS property sets the maximum width of the content area of an element.

This maximum width does not include padding, borders, or margins.

The following table summarizes the max-width Property

Item Value
Default value: none
Applies to:All elements except non-replaced inline elements, table rows, and row groups
Inherited: No
Animatable: Yes.

Syntax

The syntax of the property is as follows: 

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

Property Values

The following table describes the values of this property.

Value Description
length Set the maximum width as a length value in px, pt, cm, em, etc. Negative length values are not allowed.
percentage The maximum width in percentage. The percentage is calculated against the width of the element's containing block. Negative percentage values are not allowed.
none   The width has no maximum value. This is default value.
initialSets this property to its default value.
inherittake the value of its parent element max-width property.
The example below shows the max-width property.

Demo Code




ResultView the demo in separate window 
<!DOCTYPE html>
<html lang="en">
 <head>
  <title>Example of CSS max-width property</title>
  <style type="text/css">
    p {<!--from ww  w .j a va 2s.  c  o  m-->
        max-width: 400px;
    display: inline-block;
        background: #f0e68c;
    }
    div {
        width: 300px;
        max-width: 200px;
        background: #ffc0cb;
    }
</style>
 </head>
 <body>
  <p>Enter some text to see how it works.</p>
  <div>
   The maximum width of this div element is set to 200px, so it can't be wider than that.
  </div>
 </body>
</html>





Related Tutorials