The width property sets an element’s horizontal size. By default it sizes the content area. With box-sizing: border-box, it sizes the border box (content + padding + border).
It is not inherited. The initial value is auto. min-width and max-width can override it when the preferred width is too small or too large.
Not deprecated. Length, percentage, and auto work in all major browsers. Intrinsic keywords have strong modern support.
stretch, anchor-size(), and calc-size() are newer sizing features. Prefer length, %, auto, and *-content for everyday work.
width: auto | <length> | <percentage> | max-content | min-content | fit-content;Example: width: 300px;
| Value | Description | Try it |
|---|---|---|
auto | Browser picks the width. Initial value | Try it |
<length> | Fixed size such as 200px or 20em | Try it |
<percentage> | Percent of the containing block’s width | Try it |
max-content | As wide as the content prefers (often one long line) | Try it |
min-content | As narrow as possible without overflow (often widest word) | Try it |
fit-content | Use available space, capped near max-content | Try it |
initial | Resets to auto | Try it |
inherit | Takes the parent’s width | Try it |
widthPick a sizing method, then check how padding and limits interact.
px/em), percentage, or a keyword (auto, max-content, …).width on the box you want to size.box-sizing: content-box (default) vs border-box.min-width / max-width so layouts stay readable on small and large screens.| Piece | Required? | Role |
|---|---|---|
| Target box | Yes | Block or replaced element to size |
| Size value | Yes | Length, %, or keyword |
| box-sizing | — | Whether padding/border count inside width |
Change width on the blue box and watch how much horizontal space it takes.
Each snippet focuses on width. Extra styles stay minimal for study. Use Try It Yourself for a live editor.
Set an exact horizontal size with a length.
<style>
.box {
width: 200px;
}
</style>
<div class="box">200px wide</div>200px is a fixed distance on screen.em. 20em would scale with the element’s font size.Size relative to the containing block’s width.
<style>
.box {
width: 50%;
}
</style>
<div class="box">Half of parent</div>50% means half the containing block width.Let the box grow as wide as the text prefers.
<style>
.box {
width: max-content;
}
</style>
<div class="box">As wide as this sentence prefers.</div>max-content asks for the preferred content width.min-content shrinks toward the widest unbreakable piece (often a word).If a box is wider or narrower than expected, check these first.
With default content-box, padding and border add outside width. Use border-box to include them.
width does not apply to normal inline text spans. Use block, inline-block, flex items, or replaced elements.
Very small fixed widths can clip text when users zoom. Prefer fluid sizes for body content.
inline-size for writing modesinline-size is the logical twin of width and follows writing mode.
width is a browser CSS property for horizontal sizing. Node.js, Deno, and Bun do not apply it.
Length, percentage, and auto are supported everywhere. max-content, min-content, and fit-content are widely supported in modern browsers.
Bottom line: Safe for everyday sizing. Treat stretch, anchor-size(), and calc-size() as progressive enhancements. This is not a JavaScript runtime API.
auto lets the browser choose.One line: width sets a box’s horizontal size; pair it with box-sizing and min/max limits when needed.
Control the minimum number of lines left at the top of a new page or column.
8 people found this page helpful