Width controls an element’s horizontal size. Browsers normally make a block-level element as wide as its container—often the browser window—and let its content determine its height. Setting width is how you take the wheel instead of leaving every line to roam free. section 9.2
Think in boxes: an element has content, padding, a border, and a margin. Width and height set its dimensions, while padding, borders, and margins add the surrounding space and structure. section 9.7 section 9.0
Use width with a value that suits the job:
- A measurement unit such as px, em, rem, vw, or vh. section 9.2
- A percentage, when the width should relate to its container. section 9.2
- auto, the default, when the browser should calculate the width. section 9.2
- A block-level element such as div or p; ordinary inline elements such as span and a ignore width. Use display: inline-block when an inline element needs block-like sizing without leaving the text flow. section 9.2
Give text room to breathe
A body width of 550px can keep page text from stretching into exhausting, hard-to-scan lines. For screen reading, aim for roughly 65–75 characters per line; changing font size changes that line length too. Tiny CSS change, noticeably happier eyeballs. section 5.5
div {
box-sizing: border-box; #1
width: 630px; #2
}
This rule makes a div 630px wide and uses border-box sizing, pairing an explicit width with the box-model setting shown alongside it. section 9.2
Width can also shorten a horizontal rule so it does not run across its entire container. For text boxes, prefer setting width rather than a fixed height: content can grow, and fixed heights can leave text with nowhere sensible to go. section 3.6 section 9.2
