width Redirect 1

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

Formal syntax: [<length> | <percentage>] && [border-box | content-box]? | available | min-content | max-content | fit-content | auto
width: 300px        /* <length> values */
width: 25em

width: 75%          /* <percentage> values */

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

width: inherit

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.

Examples

table { width: 100%; }

img   { width: 200px; }

form  { width: auto; }

p     { width: 40em; }

View the live example


p { background: gold }

The Mozilla community produces a lot of great software.


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

The Mozilla community produces a lot of great software.


p { background: lightblue;  max-width: -moz-min-content; }

The Mozilla community produces a lot of great software.

Specifications

Specification Status Comment
CSS Basic Box Model Working Draft Added the max-content, min-content, available, fit-content, border-box, content-box keywords.
CSS Transitions Working Draft Lists width as animatable.
CSS Level 2 (Revision 1) Recommendation Precises on which element it applies to.
CSS Level 1 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

Document Tags and Contributors

Last updated by: Sheppy,
Hide Sidebar