References

Beginner-friendly references for web development, with live, editable examples.

The CSS width property

Property CSS All modern browsers Updated
Quick answer

The CSS width property sets how wide an element is. Use a length like 320px, a percentage of the parent like 50%, or auto (the default) to let the content decide. Pair it with max-width for responsive boxes, and remember box-sizing: border-box changes whether the value includes padding and border.

Overview

The width property controls how wide an element's box is. By default it is auto, which lets block elements stretch to fill their container and lets inline-level elements shrink to their content — so a lot of the time you do not set it at all.

When you do, you can give a fixed length (320px, 40rem), a percentage of the parent (50%), or one of the content keywords like min-content and max-content. What that number actually covers depends on box-sizing: with the default content-box it is just the content, and any padding and border are added on top; with border-box the padding and border are folded in.

For anything that needs to work on a phone and a desktop, fixed widths are a trap. The responsive pattern is to set a max-width instead, so the element can be narrower on small screens but never grows beyond a comfortable reading measure — for body text, something like max-width: 65ch keeps line lengths readable.

Syntax

selector {
  width: value;
}

/* responsive: cap the width, fill below it */
.container {
  width: 100%;
  max-width: 960px;
}

Values

The width property accepts the values below. Every property also accepts the CSS-wide keywords inherit, initial, revert and unset.

Value Description
auto The default — the browser works the width out from the content and context.
length A fixed size such as 320px, 20rem or 60ch.
percentage A share of the containing block's width, e.g. 50%.
min-content The narrowest the content allows without overflowing (the longest word).
max-content As wide as the content wants, with no wrapping.
fit-content Shrinks to the content but never exceeds the available space.

Example

Live example 
<style>
  * { box-sizing: border-box; }
  .container {
    width: 100%;
    max-width: 320px;
    background: #1c7ce9;
    color: #fff;
    padding: 16px;
    border-radius: 10px;
    font: 15px/1.5 system-ui, sans-serif;
  }
</style>
<div class="container">I am 100% wide, but never wider than 320px. Drag the preview narrower to see me shrink.</div>

Best practices

  • Prefer max-width over a fixed width for layout containers, so they shrink on small screens instead of forcing a horizontal scrollbar.
  • Cap the width of running text with something like max-width: 65ch — lines that are too long are tiring to read.
  • Set box-sizing: border-box so a width of 100% with padding still fits its parent instead of overflowing.
  • Let images scale with max-width: 100%; height: auto; rather than a fixed pixel width, so they never overflow their container.

Accessibility

Width choices feed directly into reflow, one of the WCAG success criteria. A layout should adapt down to a 320px-wide viewport without forcing two-dimensional scrolling, which means fixed pixel widths on containers are best avoided. Percentages, max-width and the intrinsic keywords let content reflow as the screen — or the zoom level — changes.

Constraining line length helps readability for everyone, and especially for people with dyslexia or low vision who rely on large text. A measure of roughly 45–75 characters is the usual target, which a ch-based max-width expresses neatly.

Frequently asked questions

How do I set the width of an element in CSS?
Use the width property, e.g. .box { width: 320px; }. You can use pixels, rem, a percentage of the parent, or auto to let the content decide.
What is the difference between width and max-width?
width sets a target size; max-width sets a ceiling the element will not pass but can stay below. Combining width: 100% with a max-width is the standard responsive container.
Why is my element wider than the width I set?
With the default box-sizing: content-box, padding and border are added on top of the width. Set box-sizing: border-box so the width includes them.
How do I make an image responsive?
Use max-width: 100%; height: auto;. The image scales down to fit its container but never grows past its natural size.
white-space z-index