Inline-block
Inline-block is a CSS display value that places an element in inline flow while retaining block-like sizing and layout behavior.
Web Design Playground
An element that participates in inline layout while retaining block-like box behavior for sizing and layout.
- How it is used
- Places selected page elements beside one another while preserving normal flow for the rest of the page.
- How deep it goes
- Explains a stepwise page-layout technique with headers, navigation, columns, widths, alignment, and whitespace caveats.
- Examples
- Uses a logo and heading, navigation list items, and article-aside columns in a Holy-Grail-style page.
- What you can do after
- Build it from scratch by turning selected elements into side-by-side rows and sized columns with display: inline-block.
Tiny CSS Projects
Inline-block is a CSS display value that keeps an element in inline flow while allowing block-like dimensions and spacing.
- How it is used
- Fixes padded inline links in summary cards and checkout cards so their visible height fits the surrounding layout.
- How deep it goes
- Explains default inline behavior, demonstrates the height problem, and applies the display change without covering layout internals.
- Examples
- Demonstrates bright call-to-action links in hotel cards and padded controls in checkout-card sections.
- What you can do after
- Diagnose/debug with CSS when vertical padding fails to enlarge an inline link inside a card.
Web Design Playground, Second Edition
An inline block is a CSS layout mode in which an element participates in inline flow while generating a block container for its contents.
- How it is used
- Uses inline-block to keep elements inline while giving them block-style sizing and spacing control.
- How deep it goes
- Defines the display behavior and demonstrates navigation spacing, but does not explore layout internals or edge cases.
- Examples
- Demonstrates unordered-list navigation with inline-block list items and right padding between labels.
- What you can do after
- Apply it via CSS to size inline elements and build spaced horizontal navigation menus.
Read how Web Design Playground, Second Edition explains inline-block →
CSS in Depth, Second Edition
Inline-block is a CSS display value that makes an element participate as an inline-level box while retaining block-container behavior.
- How it is used
- Combines inline placement with block-like sizing and container behavior when ordinary inline elements produce unsuitable spacing or wrapping.
- How deep it goes
- Explains padding, line growth, wrapping, and margin collapsing, but does not develop a complete implementation pattern.
- Examples
- Uses padded tag lists and container margin-collapsing cases to contrast inline, inline-block, and flex layouts.
- What you can do after
- Apply inline-block when elements must wrap as units, grow their line, or prevent outside margin collapse.
Read how CSS in Depth, Second Edition explains inline-block →
Related concepts
- display propertyconfigured by · The CSS display property specifies how an element participates in layout and the type of box it generates.
- inline containercontrasts with · An inline container is an HTML element that participates in inline layout, flowing with surrounding content and potentially wrapping within its containing block.
- paddingaddresses · Padding is the addition of extra space, values, or data around or within a structure to satisfy size, alignment, layout, or processing requirements.
- collapsing marginaddresses · Collapsing margin is CSS behavior in which adjoining vertical margins combine into a single effective margin rather than being added together.
- holy-grail layoutused by · The Holy Grail layout is a web page pattern with central content flanked by sidebars, typically accompanied by a header and footer.
- headingconfigured by · A heading is a textual or semantic label that introduces a section of content and, when structured, indicates its level in the document hierarchy.
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.