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> 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: revert; width: revert-layer; width: unset;
<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>
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 */ width: max-content; }
<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 */ width: min-content; }
<p class="minblue">The Mozilla community produces a lot of great software.</p>
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 | |
width |
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 |
46
22
1-48
|
79
79
|
94
3
|
No |
33
15
15-35
|
11
7
2
|
46
4.4
4.4-48
|
46
25
18-48
|
94
4
|
33
14
14-35
|
11
7
1
|
5.0
1.5
1.0-5.0
|
fit-content_function |
No |
No |
91 |
No |
No |
No |
No |
No |
No |
No |
No |
No |
max-content |
46
22
|
79
79
|
66
3
|
No |
44 |
11
2
|
46 |
46 |
66
4
|
43 |
11
1
|
5.0 |
min-content |
46
1-48
|
79 |
66
3
|
No |
33
15-35
|
11
2
|
46
4.4-48
|
46
18-48
|
66
4
|
33
14-35
|
11
1
|
5.0
1.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–2022 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/width