W3cubDocs

/CSS

auto

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: unset;

The width property is specified as either:

one of the following keyword values: min-content, max-content, fit-content, auto.
a <length> or a <percentage>.

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 don't obscure other content when the page is zoomed to increase text size.

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(<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>

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>

Percentage

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

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

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>

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	Status	Comment
CSS Box Sizing Module Level 4 The definition of 'width' in that specification.	Editor's Draft
CSS Box Sizing Module Level 3 The definition of 'width' in that specification.	Working Draft	Added the `max-content`, `min-content`, `fit-content` keywords.
CSS Level 2 (Revision 1) The definition of 'width' in that specification.	Recommendation	Precises on which element it applies to.
CSS Level 1 The definition of 'width' in that specification.	Recommendation	Initial definition.

Browser compatibilityUpdate compatibility data on GitHub

	Desktop
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari
`width`	1	12	1	4	3.5	1
Animatable	26	12	16	11	15	6.1
`fill`	46	79	No	No	33	12
`fit-content`	46 46 22 Prefixed Prefixed Implemented with the vendor prefix: -webkit- 1 — 48 Uses the non-standard name: `intrinsic`	79 79 79 Prefixed Prefixed Implemented with the vendor prefix: -webkit-	3 Prefixed 3 Prefixed Prefixed Implemented with the vendor prefix: -moz-	No	33 33 15 Prefixed Prefixed Implemented with the vendor prefix: -webkit- 15 — 35 Uses the non-standard name: `intrinsic`	11 11 6.1 Prefixed Prefixed Implemented with the vendor prefix: -webkit- 2 Uses the non-standard name: `intrinsic`
`max-content`	46 46 22 Prefixed Prefixed Implemented with the vendor prefix: -webkit-	79 79 79 Prefixed Prefixed Implemented with the vendor prefix: -webkit-	66 66 3 Prefixed Prefixed Implemented with the vendor prefix: -moz-	No	44	11 11 2 Uses the non-standard name: `intrinsic`
`min-content`	46 46 1 — 48 Uses the non-standard name: `min-intrinsic`	79	66 66 3 Prefixed Prefixed Implemented with the vendor prefix: -moz-	No	33 33 15 — 35 Uses the non-standard name: `min-intrinsic`	11 11 2 Uses the non-standard name: `min-intrinsic`
`stretch`	22 22 Uses the non-standard name: `-webkit-fill-available`	79 79 Uses the non-standard name: `-webkit-fill-available`	3 3 Uses the non-standard name: `-moz-available`	No	15 15 Uses the non-standard name: `-webkit-fill-available`	6.1 6.1 Uses the non-standard name: `-webkit-fill-available`

	Mobile
	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`width`	1	18	4	10.1	1	1.0
Animatable	4.4	26	16	14	6.1	1.5
`fill`	46	46	No	33	12	5.0
`fit-content`	46 46 ≤37 Prefixed Prefixed Implemented with the vendor prefix: -webkit- 1 — 48 Uses the non-standard name: `intrinsic`	46 46 25 Prefixed Prefixed Implemented with the vendor prefix: -webkit- 18 — 48 Uses the non-standard name: `intrinsic`	4 Prefixed 4 Prefixed Prefixed Implemented with the vendor prefix: -moz-	33 33 14 Prefixed Prefixed Implemented with the vendor prefix: -webkit- 14 — 35 Uses the non-standard name: `intrinsic`	11 11 7 Prefixed Prefixed Implemented with the vendor prefix: -webkit- 1 Uses the non-standard name: `intrinsic`	5.0 5.0 1.5 Prefixed Prefixed Implemented with the vendor prefix: -webkit- 1.0 — 5.0 Uses the non-standard name: `intrinsic`
`max-content`	46	46	66 66 4 Prefixed Prefixed Implemented with the vendor prefix: -moz-	43	11 11 1 Uses the non-standard name: `intrinsic`	5.0
`min-content`	46 46 1 — 48 Uses the non-standard name: `min-intrinsic`	46 46 18 — 48 Uses the non-standard name: `min-intrinsic`	66 66 4 Prefixed Prefixed Implemented with the vendor prefix: -moz-	33 33 14 — 35 Uses the non-standard name: `min-intrinsic`	11 11 1 Uses the non-standard name: `min-intrinsic`	5.0 5.0 1.0 — 5.0 Uses the non-standard name: `min-intrinsic`
`stretch`	4.4 4.4 Uses the non-standard name: `-webkit-fill-available`	25 25 Uses the non-standard name: `-webkit-fill-available`	4 4 Uses the non-standard name: `-moz-available`	14 14 Uses the non-standard name: `-webkit-fill-available`	6.1 6.1 Uses the non-standard name: `-webkit-fill-available`	5.0 5.0 Uses the non-standard name: `-webkit-fill-available`