Width is how much horizontal room an element box gets. Browsers normally give a block-level element the full width of its container, while its height grows enough to hold its content. That container is often as wide as the browser window by default. section 9.2
Use the CSS width property when you want more control over a block-level element’s size and layout. It accepts measurement units such as px, em, rem, vw, and vh, as well as percentages and auto. The default value, auto, lets the browser choose the width. section 9.2
A few friendly width rules keep layouts predictable:
- Width and height apply to block-level elements such as div and p. Inline elements such as span and a flow with text, so those properties are ignored. section 9.2
- Use display: inline-block when an inline element needs width-related properties while remaining inline; use display: block to make it a block element. section 9.2
- Let text determine an element’s height whenever possible. A fixed height can leave too little room when content changes. section 9.2
- Treat percentage widths as shares of a parent’s width, not shares of the viewport. section 13.5
A layout that scales
Suppose an article is 1,000px wide and a child div has width: 75%. The div becomes 750px wide. If the article shrinks to 800px, the div automatically becomes 600px wide. That relative behavior is the basis of a liquid layout. section 13.5
A liquid layout replaces fixed pixel widths with relative percentages so content can shrink on smaller screens and grow on larger ones. Add a maximum width to the outer container so text does not become uncomfortably wide for reading and navigation. section 13.5
body {
max-width: 960px;
}
Use max-width on an outer container to set an upper limit while allowing a liquid layout to scale below it. section 13.5
Try it: give a child element a percentage width, then resize its parent. Watch the child’s horizontal space change with the parent rather than staying fixed. section 13.5
