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
.
/* <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:
available
, min-content
, max-content
, fit-content
, auto
.<length>
or a <percentage>
. This may optionally be followed by one of the following keywords: border-box
, content-box
.<length>
<percentage>
border-box
<length>
or <percentage>
is applied to the element's border box.content-box
<length>
or <percentage>
is applied to the element's content box.auto
fill
fill-available
inline size or fill-available
block size, as appropriate to the writing mode.max-content
min-content
available
fit-content
[ <length> | <percentage> ] && [ border-box | content-box ]? | available | min-content | max-content | fit-content | auto
p.goldie { background: gold; }
<p class="goldie">The Mozilla community produces a lot of great software.</p>
.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>
.percent { width: 20%; background-color: silver; border: 1px solid red; }
<div class="percent">Width in percentage</div>
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>
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>
Ensure that elements set with a width
are not truncated and do not obscure other content when the page is zoomed to increase text size.
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 definition. |
CSS Intrinsic & Extrinsic Sizing Module Level 3 The definition of 'width' in that specification. | Working Draft | Adds new sizing keywords for width and height. |
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 |
Desktop | ||||||
---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | |
Basic support | Yes | 12 | 1 | 4 | 3.5 | 1 |
Animatable | ? | ? | 16 | ? | ? | ? |
max-content
|
46
|
No | 3
|
? | 15
|
6.1
|
min-content
|
46
|
No | 3
|
? | 15
|
6.1
|
stretch
|
22
|
No | 3
|
? | ? | 6.1
|
fit-content
|
46
|
No | 3
|
No | 15
|
6.1
|
content-box
|
No | No | No | No | No | No |
border-box
|
No | No | No | No | No | No |
fill
|
46 | No | ? | ? | ? | ? |
Mobile | |||||||
---|---|---|---|---|---|---|---|
Android webview | Chrome for Android | Edge Mobile | Firefox for Android | Opera for Android | iOS Safari | Samsung Internet | |
Basic support | Yes | Yes | Yes | 4 | Yes | Yes | Yes |
Animatable | ? | ? | ? | 16 | ? | ? | ? |
max-content
|
46 | 46 | No | ? | ? | ? | 5.0 |
min-content
|
46 | 46 | No | ? | ? | ? | 5.0 |
stretch
|
46 | 46
|
No | ? | ? | ? | 5.0 |
fit-content
|
46 | 46 | No | ? | ? | ? | 5.0
|
content-box
|
? | ? | No | ? | ? | ? | No |
border-box
|
? | ? | No | ? | ? | ? | No |
fill
|
46 | 46 | No | ? | ? | ? | 5.0 |
© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/width