Summary

The width CSS property specifies the width of the content area of an element. The content area is inside the padding, border, and margin of the element.

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

  • 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
  • Media visual
  • Computed value the percentage or auto as specified or the absolute length
  • Animatable yes, as a length, percentage or calc(); when both values are lengths, they are interpolated as lengths; when both values are percentages, they are interpolated as percentages; otherwise, both values are converted into a calc() function that is the sum of a length and a percentage (each possibly zero), and these calc() functions have each half interpolated as real numbers.
  • Canonical order the length or percentage before the keyword, if both are present

Syntax

/* <length> values */
width: 300px;
width: 25em;

/* <percentage> value */
width: 75%;

/* Keyword values */
width: border-box;
width: content-box;
width: max-content;
width: min-content;
width: available;
width: fit-content;
width: auto;

/* Global values */
width: inherit;
width: initial;
width: unset;

Values

<length>
See <length> for possible units.
<percentage>
Specified as a <percentage> of containing block's width.
border-box
If present, the preceding <length> or <percentage> is applied to the element's border box.
content-box
If present, the preceding <length> or <percentage> is applied to the element's content box.
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.
available
The containing block width minus horizontal margin, border and padding.
Note: WebKit implements a variation of this value, under the name fill-available as of December 2013.
fit-content
The larger of:
  • the intrinsic minimum width
  • the smaller of the intrinsic preferred width and the available width
Note: WebKit implements an earlier version of this value, under the name intrinsic, but as of June 2012, implements fit-content as well.

Formal syntax

[<length> | <percentage>] && [border-box | content-box]? | available | min-content | max-content | fit-content | auto

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 */
}
<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 */
}
<p class="minblue">The Mozilla community produces a lot of great software.</p>

Specifications

Specification Status Comment
CSS Basic Box Model
The definition of 'width' in that specification.
Working Draft Added the max-content, min-content, available, fit-content, border-box, content-box keywords.
CSS Transitions
The definition of 'width' in that specification.
Working Draft Lists width as animatable.
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 specification.

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support (Yes) 1.0 (1.7 or earlier) 4 3.5 1.0 (85)
Animatability ? 16.0 (16.0) ? ? ?
max-content 22 -webkit 3.0 (1.9)-moz ? 15 -webkit

2.0 (421) (intrinsic value)

6.1 -webkit

min-content 22 -webkit 3.0 (1.9) -moz ? 15 -webkit 6.1 -webkit
available Not supported 3.0 (1.9) -moz ? ? ?
fill-available (Yes) Not supported ? ? ?
fit-content 22 -webkit 3.0 (1.9) -moz ? 15 -webkit 6.1 -webkit
border-box and content-box Not supported Not supported Not supported Not supported Not supported
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support ? ? ? ? ?

See also

Hide Sidebar