Text box trim

Remove extra spacing around text elements using text-box-trim and text-box-edge.

Explanation

• text-box-trim: Specifies which sides of the text box should be trimmed (e.g., trim-start, trim-end, trim-both).
• text-box-edge: Determines how the edge of the text box is calculated (e.g., cap, ex, alphabetic).
• These properties help eliminate the unwanted space above and below text nodes, making alignment with other elements (like icons or images) much easier and precise.

Usage

To trim the space around typography:

.text-element {
  /* Trim both the top (start) and bottom (end) of the text box */
  text-box-trim: trim-both;
  
  /* Calculate the edge based on the cap height and alphabetic baseline */
  text-box-edge: cap alphabetic;
  
  /* Fallback or older syntax sometimes used */
  leading-trim: both;
  text-edge: cap alphabetic;
}

/* Example with an icon and text */
.button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.button-text {
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
  line-height: 1; /* Often used in conjunction */
}