What is the CSS Width Property?
The CSS width property sets an element’s preferred horizontal size, usually for its content box. Box sizing, intrinsic dimensions, layout mode, and min-width or max-width constraints can alter the used size.
How the CSS Width Property works
Width contributes a preferred size to the layout algorithm rather than guaranteeing the final border-box measurement. Its percentage or length is applied to the content box under content-box sizing and to the border box under border-box; intrinsic keywords and automatic sizing follow layout-specific rules. Minimum and maximum constraints can override the chosen value, and flex or grid negotiation may redistribute space. The property is used when sizing media surfaces and controls, but replaced elements also bring intrinsic dimensions and aspect ratios.
Key facts
- With box-sizing: content-box, declared width excludes padding and borders; with border-box, those components are included inside the declared width.
- Under the initial min-width: auto, a flex item in a container whose main axis is horizontal, and some grid items, such as one spanning a single 1fr track horizontally, can refuse to shrink narrower than their content-based minimum unless their computed overflow is hidden, scroll, or auto. Setting min-width: 0 removes that automatic floor.
- For an image or video with intrinsic proportions, specifying one dimension can let the other remain automatic; forcing both dimensions may distort the rendered content.
When the CSS Width Property matters
Set width for responsive images, video players, panels, and controls while accounting for their containing layout. A percentage width can overflow when padding and borders are added under content-box sizing.