width

width sets an element’s physical width. It usually measures the content box; box-sizing can make it measure the border box instead.

A percentage inside a container

The blue box is half the containing block’s content width. Its percentage is not half the viewport unless the containing block has that size.

<div class="parent"><div class="child">width: 50%</div></div>

.parent {
  width: 100%;
  max-width: 24rem;
  background: #e2e8f0;
}
.child {
  width: 50%;
  box-sizing: border-box;
  padding: 1rem;
  background: #dbeafe;
}

A readable fluid column

This column fills a narrow container and stops growing at 40ch. Auto side margins divide any remaining horizontal space.

<div class="reading">
  A readable column can use the available width without stretching across an
  entire large display.
</div>

.reading {
  width: 100%;
  max-width: 40ch;
  margin-inline: auto;
  box-sizing: border-box;
  padding: 1rem;
  background: #eff6ff;
}

Values and prerequisites

The initial value is auto; width is not inherited. Auto sizing depends on layout context. Lengths, percentages, min-content, max-content, and fit-content answer different sizing needs. Width does not size an ordinary non-replaced inline element such as span; use inline-block or another appropriate display mode.

Min-width and max-width constrain the used width, with the minimum winning if constraints conflict. A flex item may grow or shrink from its sizing basis, so a width declaration is not always its final width.

Newer values and functions such as stretch, anchor-size(), and calc-size() need their own compatibility checks. Do not infer support from basic width support.

The old example declared 40rem and then 100% on the same element; the latter replaced the former. Use max-width for an upper limit, and logical inline-size when the layout should follow writing mode.

Sources and browser support

MDN: width describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.