CSS - Width Property

The width property sets the width of an element’s content area. In case, the box-sizing is set to border-box , the property width sets the width of the border area.

The value specified by the width property remains within the values defined by min-width and max-width properties.

Refer the image for the understanding of width of an element.

Possible Values

• <length> : A specific length value such as pixels (px), centimeters (cm), inches (in), etc.

<length> : A specific length value such as pixels (px), centimeters (cm), inches (in), etc.

• <percentage> : A percentage of the width of the containing element.

<percentage> : A percentage of the width of the containing element.

• auto : The browser will calculate the width automatically based on the content. It is the default value.

auto : The browser will calculate the width automatically based on the content. It is the default value.

• max-content : Defines the intrinsic preferred width.

max-content : Defines the intrinsic preferred width.

• min-content : Defines the intrinsic minimum width.

min-content : Defines the intrinsic minimum width.

• fit-content : Fits the content in the available space, but never more than max-content.

fit-content : Fits the content in the available space, but never more than max-content.

• fit-content : fit-content formula is used, i.e, min(max-content, max(min-content, <length-percentage>)) .

fit-content : fit-content formula is used, i.e, min(max-content, max(min-content, <length-percentage>)) .

Applies to

All the HTML elements except non-replaced inline elements, table rows, and row groups.

DOM Syntax

object.style.width = "100px";

CSS Width - Length Unit

Here is an example of adding a width to a div element in length units:

CSS Width - Percentage Value

Here is an example of adding a width to a div element in percentage values:

CSS Width - Auto

Here is an example of adding a width to a div element as auto :

CSS Width - Using max-content and min-content

Here is an example of width equal to max-content and min-content :

CSS width - Image

Here is an example of adding width to an image:

CSS width - Using fit-content

Here is an example of fit-content value set for width of a list:

CSS Width - Related Properties

Following is the list of related CSS properties of width :