The "Gotcha"
leading-*
(line-height) can sometimes cause unexpected vertical spacing issues or
misalignment when trying to line up multi-line text with adjacent single-line elements (like icons).
The text block's overall height is affected by line-height, which can make precise vertical centering tricky
if relying solely on the baseline or text-top/bottom alignment.
Here, we have some text with
leading-relaxed
next to an icon-like element.
Without specific alignment utilities for the container, the perceived vertical center of the multi-line text block might not perfectly align with the center of the icon.
This text has
leading-relaxed
. Notice how its vertical distribution
might seem a bit off when placed next to an icon without careful alignment.
The effect can be subtle or more pronounced depending on various factors.
(Text may or may not look perfectly centered with the icon by default; it depends on many factors. The point is line-height affects the text block's internal spacing.)
One common way to address this is to use Flexbox and its alignment properties (e.g.,
items-center
)
on the parent container. This aligns the items (icon and text block) along the cross-axis (vertically, by default for a row).
With
flex items-center
on the parent,
this text (using
leading-relaxed
) and the icon
are now vertically centered relative to each other.
This approach is generally robust for aligning elements of different heights or internal spacing. The key is to manage the alignment at the container level.