How deeply does Tiny CSS Projects cover inline-block?

Explains default inline behavior, demonstrates the height problem, and applies the display change without covering layout internals.

Inline-block

As explained in Tiny CSS Projects

Inline-block is a CSS display value that keeps an element in inline flow while allowing block-like dimensions and spacing.

inline-block keeps an element in inline flow while allowing padding to affect its height. This makes it useful for links that need button-like spacing without leaving the line. section 5.4.2 section 8.2.6

Use inline-block when an inline element needs visible box styling:

Set display: inline-block on a call-to-action link before adding vertical padding. section 5.4.2
Change links from inline to inline-block when vertical padding makes them extend beyond a card. section 8.2.6

A padded card link

a { background-color: #ffa600; color: rgba(0, 0, 0, .75); padding: 0.75rem 1.5rem; display: inline-block; border-radius: 4px; text-decoration: none; } This preserves inline placement while making the padding contribute to the link's visible height.

How Tiny CSS Projects covers it

liveBook manning.com

Read Tiny CSS Projects on liveBook Get the book at manning.com

Also explained in

liveBook manning.com

Web Design PlaygroundAn element that participates in inline layout while retaining block-like box behavior for sizing and layout.
liveBook manning.com

Web Design Playground, Second EditionAn inline block is a CSS layout mode in which an element participates in inline flow while generating a block container for its contents.
liveBook manning.com

CSS in Depth, Second EditionInline-block is a CSS display value that makes an element participate as an inline-level box while retaining block-container behavior.

Compare how 4 books explain 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.

This explainer was generated by Manning's knowledge graph from the text of Tiny CSS Projects. The section links point to the parts of the book it draws on.