The width CSS property sets an element's width. By default, it sets the width of the content area, but if box-sizing is set to border-box, it sets the width of the border area.

/* <length> values */ width: 300px; width: 25em;  /* <percentage> value */ width: 75%;  /* Keyword values */ width: max-content; width: min-content; width: fit-content(20em); width: auto;  /* Global values */ width: inherit; width: initial; width: revert; width: unset; 

width

The width CSS property sets an element's width. By default, it sets the width of the content area, but if box-sizing is set to border-box, it sets the width of the border area.

The min-width and max-width properties override width.

Syntax

/* <length> values */ width: 300px; width: 25em;  /* <percentage> value */ width: 75%;  /* Keyword values */ width: max-content; width: min-content; width: fit-content(20em); width: auto;  /* Global values */ width: inherit; width: initial; width: revert; width: unset; 

Values

<length>

Defines the width as an absolute value.

<percentage>

Defines the width as a percentage of the containing block's width.

auto

The browser will calculate and select a width for the specified element.

max-content

The intrinsic preferred width.

min-content

The intrinsic minimum width.

fit-content(<length-percentage>)

Uses the fit-content formula with the available space replaced by the specified argument, i.e. min(max-content, max(min-content, <length-percentage>)).

Accessibility concerns

Ensure that elements set with a width aren't truncated and/or don't obscure other content when the page is zoomed to increase text size.

MDN Understanding WCAG, Guideline 1.4 explanations Understanding Success Criterion 1.4.4 | W3C Understanding WCAG 2.0

Formal definition

Initial value	auto
Applies to	all elements but non-replaced inline elements, table rows, and row groups
Inherited	no
Percentages	refer to the width of the containing block
Computed value	a percentage or auto or the absolute length
Animation type	a length, percentage or calc();

Formal syntax

auto | <length> | <percentage> | min-content | max-content | fit-content | fit-content(<length-percentage>)
where <length-percentage> = <length> | <percentage>

Examples

Default width

p.goldie {   background: gold; } 

<p class="goldie">The Mozilla community produces a lot of great software.</p> 

Example using pixels and ems

.px_length {   width: 200px;   background-color: red;   color: white;   border: 1px solid black; }  .em_length {   width: 20em;   background-color: white;   color: red;   border: 1px solid black; } 

<div class="px_length">Width measured in px</div> <div class="em_length">Width measured in em</div> 

Example with percentage

.percent {   width: 20%;   background-color: silver;   border: 1px solid red; } 

<div class="percent">Width in percentage</div> 

Example using "max-content"

p.maxgreen {   background: lightgreen;   width: intrinsic;           /* Safari/WebKit uses a non-standard name */   width: -moz-max-content;    /* Firefox/Gecko */   width: -webkit-max-content; /* Chrome */   width: max-content; } 

<p class="maxgreen">The Mozilla community produces a lot of great software.</p> 

Example using "min-content"

p.minblue {   background: lightblue;   width: -moz-min-content;    /* Firefox */   width: -webkit-min-content; /* Chrome */   width: min-content; } 

<p class="minblue">The Mozilla community produces a lot of great software.</p> 

Specifications

Specification
CSS Box Sizing Module Level 4 # width-height-keywords

See also

The box model height box-sizing min-width, max-width The mapped logical properties: block-size, inline-size

Last modified: Feb 5, 2022, by MDN contributors

Select your preferred language English (US)DeutschEspañolFrançais日本語한국어PolskiPortuguês (do Brasil)Русский中文 (简体)正體中文 (繁體) Change language