CSS Width

The CSS width property sets the width of an element.

The width property doesn't include padding, borders, or margins. It sets the width of the area inside the padding, border, and margin of the element.

CSS width values

The width property can have the following values:

• auto This is default. The browser calculates the width
• length Defines the width in px, cm etc.
• % Defines the width in percent of the containing block
• initial Sets the width to its default value
• inherit The width will be inherited from its parent value

Example:

div {  
    width:  200px;
    background-color:  blue;  
}

note

Remember that the width property doesn't include padding, borders, or margins! It sets the width of the area inside the padding, border, and margin of the element!

CSS max-width

The max-width property defines the maximum width of an element.

If the content is larger than the maximum width, it will automatically change the width of the element.

If the content is smaller than the maximum width, the max-width property has no effect.

note

This prevents the value of the width property from becoming larger than max-width. The value of the max-width property overrides the width property.

Example:

div {  
    max-width:  100px;
}