Width
Width is a measure of extent along a specified dimension, such as spatial size or the number of units or features in a model.
Web Design Playground, Second Edition
The CSS width property specifies the horizontal size of an element's content box or replaced content.
- How it is used
- Uses width to make home-page text readable and to begin controlling page layout.
- How deep it goes
- Explains browser defaults, block-versus-inline behavior, units, percentages, auto, and box-model context; defers layout in earnest.
- Examples
- Demonstrates a 550px body, a 630px div, and a shortened horizontal rule.
- What you can do after
- Apply it via CSS to set block widths and tune line length.
Read how Web Design Playground, Second Edition explains width →
Tiny CSS Projects
The CSS width property specifies the horizontal size of an element's box.
- How it is used
- Uses width to size responsive cards, matching card faces, circular share links, and a collapsible menu.
- How deep it goes
- Works through viewport, percentage, fixed, and changing widths in UI examples; leaves the share menu’s JavaScript behavior in starter code.
- Examples
- Shows a profile card, two credit-card faces, 48-pixel share links, a collapsible menu, and SVG loader bars.
- What you can do after
- Apply it via CSS to size a responsive card and reveal a menu by changing its width.
Web Design Playground
The horizontal extent or measure of an object or layout box.
- How it is used
- Controls block-level element sizing and supports liquid layouts that adapt across screen sizes.
- How deep it goes
- Defines browser width defaults, property values, inline exceptions, and percentage calculations without detailing the full box-model sizing rule.
- Examples
- Uses a 75%-wide child inside 1,000px and 800px article containers, plus a 960px maximum-width body.
- What you can do after
- Apply it via CSS width and max-width properties to size elements and create percentage-based liquid layouts.
Related concepts
- max-width propertyconfigured by · The CSS max-width property sets the maximum permitted width of an element’s applicable box.
- line lengthconfigures · Line length is the amount of text occupying one line, commonly measured by character count or rendered horizontal width.
- min-width propertyconfigured by · The CSS min-width property specifies the minimum permitted width of an element’s applicable box.
- flex-basisalternative to · The CSS flex-basis property specifies a flex item’s initial size along the flex container’s main axis before available space is distributed.
- CSS box modelused by · The CSS box model represents each element as a rectangular box comprising content, padding, border, and margin areas.
- getBoundingClientRectproduced by · getBoundingClientRect is a DOM method that returns an element's size and position relative to the viewport.
These guides are generated from the text of Manning books by Manning's knowledge graph and link to the sections they draw on. The full books are available on liveBook and at manning.com.