Width Property
Last updated: 2026-09-13
width Width Property
The width property sets the width of an element's content area and is one of the most commonly used sizing properties in the CSS box model. It only affects non-replaced elements, and its default value, auto, lets the browser compute the width automatically based on the containing block. In real-world layouts, width is often combined with max-width and min-width to build responsive designs.
| Category | |
|---|---|
| Initial Value | auto |
| Inherited | No |
| Applies To | non-replaced |
| Animation Type | length |
| CSS Version | CSS1 |
| Status | Standard |
📝 Syntax
width: auto | <length> | <percentage> | min-content | max-content | fit-content | fit-content(<length-percentage>);⚙️ Values
| Value | Type | Description |
|---|---|---|
auto | Keyword | The browser calculates the width automatically. |
<length> | Type | A fixed length value, such as 16px or 2em. |
<percentage> | Type | A percentage relative to the containing block's width. |
max-content | min-content | fit-content | Keyword | Keywords that compute the width from the content. |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| width | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Supported in all major browsers | |||||
Tip： With the default width:auto, block-level elements fill the full width of their parent container, while inline-level elements shrink to fit their content.
Warning： width does not include padding or border unless you set box-sizing:border-box.
❓ FAQ
QWhat is the difference between width:100% and width:auto?
Awidth:100% makes the content area exactly equal to the parent container's width, so adding padding or border pushes the element's total width beyond the parent. width:auto, on the other hand, automatically subtracts padding and border, letting the element fill the parent exactly. In short: 100% fixes the content area while auto adapts the total width, and the difference is most visible on boxes that have padding.
QHow do I make an element's width adapt to its content?
AUse content-driven keywords. width:max-content sets the width to the widest the content can be without wrapping; width:min-content uses the width of the longest word or smallest unit; width:fit-content sits between the two, sized to the content when space allows and shrinking when it does not. Note that these keywords require browser support; some older mobile browsers need prefixes or fallbacks.
QWhat is the width percentage relative to?
AThe percentage is computed against the width of the containing block's content area. For elements in normal flow, the containing block is the parent's content area; for absolutely positioned elements, it is the padding box of the nearest positioned ancestor; for fixed elements, it is the viewport. So a child's width:100% refers to the parent's content area, not to its full outer size.
QHow do I make images responsive without overflowing their container?
AThe standard pattern is img { max-width:100%; height:auto; }. max-width:100% keeps the image scaling down proportionally as the container narrows so it never overflows, while height:auto recomputes the height from the original aspect ratio to avoid distortion. This is safer than using width:100% alone, which forcibly stretches small images and makes them look blurry. Apply the pattern to every media element so both images and video scale safely inside any layout.
🏷️ Related Properties
💡 Related Cases
📚 Related Tutorials
CSS Box Model Tutorial
Understand how width relates to padding and border.
max-width Property
Cap the element's maximum width for responsive layouts.
