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 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.
<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>))
.
Ensure that elements set with a width
aren't truncated and/or don't obscure other content when the page is zoomed to increase text size.
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(); |
width =
auto |
<length-percentage [0,∞]> |
min-content |
max-content |
fit-content( <length-percentage [0,∞]> )
<length-percentage> =
<length> |
<percentage>
Specification |
---|
CSS Box Sizing Module Level 4 # width-height-keywords |
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
auto |
1 | 12 | 1 | 4 | 3.5 | 1 | 4.4 | 18 | 4 | 10.1 | 1 | 1.0 |
animatable |
26 | 12 | 16 | 11 | 15 | 7 | 4.4 | 26 | 16 | 14 | 7 | 1.5 |
fill |
46 | 79 | No | No | 33 | 12 | 46 | 46 | No | 33 | 12 | 5.0 |
fit-content |
46221–48 | 7979 | 943 | No | 331515–35 | 1172 | 464.44.4–48 | 462518–48 | 944 | 331414–35 | 1171 | 5.01.51.0–5.0 |
fit-content_function |
No | No | 91 | No | No | No | No | No | No | No | No | No |
max-content |
4622 | 7979 | 663 | No | 44 | 112 | 46 | 46 | 664 | 43 | 111 | 5.0 |
min-content |
461–48 | 79 | 663 | No | 3315–35 | 112 | 464.4–48 | 4618–48 | 664 | 3314–35 | 111 | 5.01.0–5.0 |
stretch |
22 | 79 | 3 | No | 15 | 7 | 4.4 | 25 | 4 | 14 | 7 | 5.0 |
height
box-sizing
min-width
, max-width
block-size
, inline-size
© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/auto