inline-block makes an element participate in inline flow while retaining block-container behavior, so padding and other dimensions can affect its layout differently from a purely inline element. section 3.2
Use inline-block when the layout needs both inline placement and box-like behavior:
- Let an element’s padding contribute appropriately to its rendered height and surrounding layout. section 3.2
- Prevent margins from collapsing through the outside of a container. section 3.5.3
- Choose whole-element wrapping when an inline item’s contents should not split across lines. section 12.1.3
Tags and wrapping
A tag list can use inline items for natural whitespace, but inline-block changes the trade-off: each tag remains a single wrapping unit, and the line grows to accommodate its padding. Add horizontal and vertical margins when spacing must be explicit. section 12.1.3
Listing 12.5 Styling the tags
@layer modules {
.tag-list {
list-style: none; #1
padding-inline-start: unset; #1
}
.tag-list > li {
display: inline;
padding: 0.3rem 0.5rem;
font-size: 0.8rem;
border-radius: 0.2rem;
background-color: var(--light-gray);
line-height: 2.6; #2
}
}
Compare the tag-list listing’s display: inline rule with inline-block behavior: inline content can split when wrapping, while an inline-block remains intact and can enlarge the line. section 12.1.3
