An inline container flows with surrounding text from left to right and wraps when it reaches the edge of its containing block. Bold text and links commonly behave this way, unlike block-level elements, which begin on separate lines and fill their container’s width. section 3.1
Normal document flow handles width and height differently: the parent constrains available width, while child content determines the parent’s height. Inline content therefore adapts naturally as text wraps. section 3.1 section 3.7
Wrapping a tag list
A tag list can place each item on the same flowing line with `display: inline`, padding, a background, and rounded corners. Padding makes each item taller, but does not increase the text line’s height; increase `line-height` as well, or wrapped rows can overlap. Natural whitespace between inline items supplies horizontal spacing. section 12.1.3
Choose the layout behavior according to the constraints:
- Use inline elements when content should participate in text flow and wrap naturally. section 3.1
- Use flexbox or inline-block when the line must grow to accommodate padded items; provide horizontal and vertical margins to preserve spacing. 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
}
}
Inspect the tag-list rules showing inline display, decorative padding, and the line-height adjustment that prevents wrapped rows from overlapping. section 12.1.3
