Transloadit

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

  1. With box-sizing: content-box, declared width excludes padding and borders; with border-box, those components are included inside the declared width.
  2. With min-width: auto, a flex or grid item resists shrinking below its content-based minimum, but a smaller definite width or flex-basis, an explicit min-width, or a non-visible overflow value lowers that floor and lets the item shrink.
  3. 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.

Turn media knowledge into a working pipeline

Connect uploads, processing, AI, storage, and delivery through one declarative API — with the encoding stack, scaling, and format churn handled for you.

Try Transloadit for free