width
BaselineWidely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
* Some parts of this feature may have varying levels of support.
ThewidthCSS property sets an element's width. By default, it sets the width of thecontent area, but ifbox-sizing is set toborder-box, it sets the width of theborder area.
Try it
width: 150px;width: 20em;width: 75%;width: auto;<section> <div> This is a box where you can change the width. </div></section>#example-element { display: flex; flex-direction: column; background-color: #5b6dcd; height: 80%; justify-content: center; color: #ffffff;}The specified value ofwidth applies to the content area so long as its value remains within the values defined bymin-width andmax-width.
- If the value for
widthis less than the value formin-width, thenmin-widthoverrideswidth. - If the value for
widthis greater than the value formax-width, thenmax-widthoverrideswidth.
Note:As a geometric property,width also applies to the<svg>,<rect>,<image>, and<foreignObject> SVG elements, withauto resolving to100% for<svg> and0 for other elements, and percent values being relative to the SVG viewport width for<rect>. The CSSwidth property value overrides any SVGwidth attribute value set on the SVG element.
Syntax
/* <length> values */width: 300px;width: 25em;width: anchor-size(width);width: anchor-size(--myAnchor inline, 120%);/* <percentage> value */width: 75%;/* Keyword values */width: max-content;width: min-content;width: fit-content;width: fit-content(20em);width: auto;width: stretch;/* Global values */width: inherit;width: initial;width: revert;width: revert-layer;width: unset;Values
<length>Defines the width as a distance value.
<percentage>Defines the width as a percentage of thecontaining block's width.
autoThe browser will calculate and select a width for the specified element.
max-contentThe intrinsic preferred width.
min-contentThe intrinsic minimum width.
fit-contentUse the available space, but not more thanmax-content, i.e.,
min(max-content, max(min-content, stretch)).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>)).stretchSets the width of the element'smargin box to the width of itscontaining block. It attempts to make the margin box fill the available space in the containing block, so in a way behaving similar to
100%but applying the resulting size to the margin box rather than the box determined bybox-sizing.
Accessibility
Ensure that elements set with awidth aren't truncated and/or don't obscure other content when the page is zoomed to increase text size.
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 orauto or the absolute length |
| Animation type | alength,percentage or calc(); |
Formal syntax
width =
auto|
<length-percentage [0,∞]>|
min-content|
max-content|
fit-content(<length-percentage [0,∞]>)|
<calc-size()>|
<anchor-size()>
<length-percentage> =
<length>|
<percentage>
<calc-size()> =
calc-size(<calc-size-basis> ,<calc-sum>)
<anchor-size()> =
anchor-size([<anchor-name>||<anchor-size>]? ,<length-percentage>?)
<calc-size-basis> =
<size-keyword>|
<calc-size()>|
any|
<calc-sum>
<calc-sum> =
<calc-product>[[ '+'| '-']<calc-product>]*
<anchor-name> =
<dashed-ident>
<anchor-size> =
width|
height|
block|
inline|
self-block|
self-inline
<calc-product> =
<calc-value>[[ '*'| /]<calc-value>]*
<calc-value> =
<number>|
<dimension>|
<percentage>|
<calc-keyword>|
(<calc-sum>)
<calc-keyword> =
e|
pi|
infinity|
-infinity|
NaN
Examples
Default width
p.gold { background: gold;}<p>The MDN community writes really great documentation.</p>Example using 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>Width measured in px</div><div>Width measured in em</div>Example with percentage
.percent { width: 20%; background-color: silver; border: 1px solid red;}<div>Width in percentage</div>Example using "max-content"
p.max-green { background: lightgreen; width: max-content;}<p>The MDN community writes really great documentation.</p>Example using "min-content"
p.min-blue { background: lightblue; width: min-content;}<p>The MDN community writes really great documentation.</p>Stretch width to fill the containing block
HTML
<div> <div>text</div></div><div> <div>stretch</div></div>CSS
@supports not (width: stretch) { .parent { display: none !important; } body::after { content: "Your browser doesn't support the `stretch` value yet."; }}.parent { border: solid; margin: 1rem; display: flex;}.child { background: #0999; margin: 1rem;}.stretch { width: stretch;}Result
Specifications
| Specification |
|---|
| CSS Box Sizing Module Level 4 # width-height-keywords |
| CSS Box Sizing Module Level 4 # sizing-values |