You’re reading the English version of this content since no translation exists yet for this locale. Bu makaleyi çevirmemize yardım edin!
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: 25em border-box; width: 75% content-box; width: max-content; width: min-content; width: available; width: fit-content; width: auto; /* Global values */ width: inherit; width: initial; width: unset;
The width
property is specified as either:
- one of the following keyword values:
available
,min-content
,max-content
,fit-content
,auto
. - a
<length>
or a<percentage>
. This might optionally be followed by one of the following keywords:border-box
,content-box
.
Values
<length>
- Defines the width as an absolute value.
<percentage>
- Defines the width as a percentage of the containing block's content width. If the width of the containing block depends on the width of the element, the resulting layout is undefined.
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 calculates and selects a width for the specified element.
fill
- Use the
fill-available
inline size orfill-available
block size, as appropriate to the writing mode. max-content
- The intrinsic preferred width.
min-content
- The intrinsic minimum width.
available
- The containing block width minus horizontal margin, border, and padding.
fit-content
- The larger of:
- the intrinsic minimum width
- the smaller of the intrinsic preferred width and the available width
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>
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
Specifications
Specification | Status | Comment |
---|---|---|
CSS Intrinsic & Extrinsic Sizing Module Level 3 The definition of 'width' in that specification. |
Working Draft | Added the max-content , min-content , available , fit-content 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 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 |
Media | visual |
Computed value | a percentage or auto or the absolute length |
Animation type | a length, percentage or calc(); |
Canonical order | the length or percentage before the keyword, if both are present |
Browser compatibility
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 Yes |
border-box | Chrome No support No | Edge No support No | Firefox No support No | IE No support No | Opera No support No | Safari No support No | WebView Android No support No | Chrome Android No support No | Firefox Android No support No | Opera Android ? | Safari iOS No support No | Samsung Internet Android No support No |
content-box | Chrome No support No | Edge No support No | Firefox No support No | IE No support No | Opera No support No | Safari No support No | WebView Android No support No | Chrome Android No support No | Firefox Android No support No | Opera Android ? | Safari iOS No support No | Samsung Internet Android No support No |
fill | Chrome Full support 46 | Edge No support No | 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 ? | Safari iOS Full support 12 | Samsung Internet Android Full support 5.0 |
fit-content | Chrome
Full support
46
| Edge No support No | 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 ? | Safari iOS
Full support
11
| Samsung Internet Android
Full support
5.0
|
max-content | Chrome
Full support
46
| Edge No support No | 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 No support No | 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 |
stretch | Chrome
Full support
22
| Edge No support No | 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 ? | Safari iOS
Full support
6.1
| Samsung Internet Android Full support 5.0 |
Legend
- Full support
- Full support
- No support
- No support
- Compatibility unknown
- Compatibility unknown
- 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.