Text Box

The text-box utility uses the CSS text-box-trim property to remove extra vertical space (half-leading) above and below text. This results in better vertical centering and improved alignment when text appears next to icons.

Browser support

Text-box trim is not yet supported in Firefox. The feature degrades gracefully — text will simply have its normal line-height spacing.

Side by side

<div class="tng-surface border-sm pb-xs pi-sm">
  <div class="tng-group">
    <i class="tng-icon icon-download" aria-hidden="true"></i>
    <span>Default</span>
  </div>
</div>
<div class="tng-surface border-sm p-sm">
  <div class="tng-group">
    <i class="tng-icon icon-download" aria-hidden="true"></i>
    <span class="tng-text-box">With Text Box</span>
  </div>
</div>

Default

With Text Box

Note

When the text-box trim is applied, you can apply uniform padding (e.g., p-sm) to the container without worrying about extra space above or below the text.

Components

Many components apply text-box trim out-of-the-box when text is wrapped in a <span>.

<button class="tng-button is-primary">
  <i class="tng-icon icon-download" aria-hidden="true"></i>
  <span>Download</span>
</button>

If you notice with components that they wrap their text content in a <span> element. Be aware this is intentional — it enables the text-box trim to work automatically. When you follow the documented markup patterns, you get better vertical centering for free.