Skip to content

CSS Width

How the CSS width property works, including its values (auto, length, %, initial, inherit) and how it differs from padding, borders, and margins.

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;  
}

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.

Example:

div {  
	max-width:  100px;
}
Navigation