= CSS inline-block box
{c}
A <CSS inline-block box> participates as one unit in its parent's <CSS inline formatting context> while providing a <CSS block container> for its own contents. It can therefore sit beside text or other inline-level boxes while containing independently laid-out text and blocks. The outer and inner layout roles are separate.<Visual formatting model in CSS 2.2 by W3C>[§§9.2.1, 9.2.2 and 9.2.4, inline-block as an atomic inline-level block container]{ref}
For example, two cards each have a <CSS border box> width of $80$ <CSS pixels>, zero margins and an intervening space that occupies $10$ pixels. Their combined width is $80+10+80=170$ pixels. They can share an available line width of $180$ pixels, but not $160$ pixels under these assumptions. Text inside either card can wrap within that card; the surrounding line treats the card as one unit instead of dividing it into several fragments.
Declaring `display: inline-block; width: 80px` also makes width applicable to an ordinary non-replaced element that would otherwise have generated an inline box. Check <CSS box-sizing> before deciding whether the eighty pixels describe its content or border dimensions.
<CSS vertical alignment> determines placement within the surrounding line. A gap beneath an inline-block can consequently concern baseline alignment rather than a mysterious extra margin. Source whitespace between cards can also occupy inline space. Diagnose these effects using the outer line layout and the card's internal <CSS block formatting context> separately.
Back to article page
