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 source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
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.
- MDN Understanding WCAG, Guideline 1.4 explanations
- Understanding Success Criterion 1.4.4 | 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(<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 compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
width | Chrome Full support 1 | Edge Full support 12 | Firefox Full support 1 | IE Full support 4 | Opera Full support 3.5 | Safari Full support 1 | WebView Android Full support 1 | Chrome Android Full support 18 | Firefox Android Full support 4 | Opera Android Full support 10.1 | Safari iOS Full support 1 | Samsung Internet Android Full support 1.0 |
Animatable | Chrome Full support 26 | Edge Full support 12 | Firefox Full support 16 | IE Full support 11 | Opera Full support 15 | Safari Full support 6.1 | WebView Android Full support 4.4 | Chrome Android Full support 26 | Firefox Android Full support 16 | Opera Android Full support 14 | Safari iOS Full support 6.1 | Samsung Internet Android Full support 1.5 |
fill | Chrome Full support 46 | Edge Full support 79 | Firefox No support No | IE No support No | Opera Full support 33 | Safari Full support 12 | WebView Android Full support 46 | Chrome Android Full support 46 | Firefox Android No support No | Opera Android Full support 33 | Safari iOS Full support 12 | Samsung Internet Android Full support 5.0 |
fit-content | Chrome
Full support
46
| Edge
Full support
79
| Firefox
Full support
3
| IE No support No | Opera
Full support
33
| Safari
Full support
11
| WebView Android
Full support
46
| Chrome Android
Full support
46
| Firefox Android
Full support
4
| Opera Android
Full support
33
| Safari iOS
Full support
11
| Samsung Internet Android
Full support
5.0
|
max-content | Chrome
Full support
46
| Edge
Full support
79
| Firefox
Full support
66
| IE No support No | Opera Full support 44 | Safari
Full support
11
| WebView Android Full support 46 | Chrome Android Full support 46 | Firefox Android
Full support
66
| Opera Android Full support 43 | Safari iOS
Full support
11
| Samsung Internet Android Full support 5.0 |
min-content | Chrome
Full support
46
| Edge Full support 79 | Firefox
Full support
66
| IE No support No | Opera
Full support
33
| Safari
Full support
11
| WebView Android
Full support
46
| Chrome Android
Full support
46
| Firefox Android
Full support
66
| Opera Android
Full support
33
| Safari iOS
Full support
11
| Samsung Internet Android
Full support
5.0
|
stretch | Chrome
Full support
22
| Edge
Full support
79
| Firefox
Full support
3
| IE No support No | Opera
Full support
15
| Safari
Full support
6.1
| WebView Android
Full support
4.4
| Chrome Android
Full support
25
| Firefox Android
Full support
4
| Opera Android
Full support
14
| Safari iOS
Full support
6.1
| Samsung Internet Android
Full support
5.0
|
Legend
- Full support
- Full support
- No support
- No support
- Experimental. Expect behavior to change in the future.
- Experimental. Expect behavior to change in the future.
- Non-standard. Expect poor cross-browser support.
- Non-standard. Expect poor cross-browser support.
- Uses a non-standard name.
- Uses a non-standard name.
- Requires a vendor prefix or different name for use.
- Requires a vendor prefix or different name for use.
See also
- box model
height
box-sizing
min-width
,max-width
- The mapped logical properties:
block-size
,inline-size