Display property
The CSS display property specifies how an element participates in layout and the type of box it generates.
Tiny CSS Projects
The CSS display property specifies the layout behavior and box type generated for an element.
- How it is used
- Uses display to change box behavior and turn parents into containers for practical page and component layouts.
- How deep it goes
- Explains block versus inline behavior and applies grid and flex values with alignment and spacing; it does not develop a full property reference.
- Examples
- Shows a full-width newspaper date, a centered profile card, and a checkout layout that places sections side by side on wide screens.
- What you can do after
- Build it from scratch by choosing block, grid, or flex for a layout and positioning the affected children.
Web Design Playground, Second Edition
The CSS display property specifies how an element participates in layout and whether it generates a box.
- How it is used
- Controls whether elements behave as blocks, inline blocks, or grid containers during layout.
- How deep it goes
- Defines three practical display uses through examples but does not detail the full display value set.
- Examples
- Uses element sizing and a padded horizontal navigation menu to demonstrate display behavior.
- What you can do after
- Apply display: block, display: inline-block, or display: grid to change an element's layout behavior.
Read how Web Design Playground, Second Edition explains display property →
Related concepts
- inline-blockconfigures · Inline-block is a CSS display value that places an element in inline flow while retaining block-like sizing and layout behavior.
- CSS Gridconfigures · CSS Grid is a CSS layout system for arranging elements in two-dimensional rows and columns.
- flex containerconfigures · A flex container is an element whose children are laid out as flex items according to the CSS Flexible Box Layout model.
- flexboxuses · Flexbox is a CSS one-dimensional layout model for arranging, sizing, aligning, and distributing items along a row or column.
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.