Menu
Box Model & Layout
CSS Inline-block
A hybrid of inline and block behaviors.
1Best of Both Worlds
Flows like text (inline) but allows width/height setting (block).
Example Code
css
.box {
display: inline-block;
width: 100px;
height: 100px;
background: blue;
}2Understand it in a real interface
An inline-block participates in an inline flow but accepts width and height like a box. Whitespace between elements can introduce visible gaps, and baseline alignment can affect their position. A flex row often expresses a group of controls more clearly, but inline-block remains useful for an individual inline badge.
3Try it yourself
Place three inline-block badges inside a paragraph. Compare baseline and middle vertical alignment, then inspect the spaces between them. Convert the group to a flex row with gap and observe how the spacing responsibility moves from text whitespace to layout.
Finished reading?
Mark this topic as complete to track progress.