網頁功能：
text-box
問題說明
瀏覽器會自動在文字字元上方和下方加入額外的空白字元，以配合行高和字型專屬指標，例如上緣和下緣。這個「幽靈空間」會導致無法使用標準 CSS 達到像素完美的垂直對齊。
常見問題包括：
- 圖示未對齊：即使使用
align-items: center，文字在視覺上仍會比相鄰圖示低或高。 - 邊框間距不正確：由於字型的內部行距，含有
padding: 12px的按鈕在視覺上看起來頂端或底部有更多空間。 - 齊平對齊：如果不使用「魔術數字」負邊界，就無法將大寫字母的頂端與容器或相鄰圖片的頂端對齊。
解決方法
text-box-trim 和 text-box-edge 屬性 (簡寫為 text-box) 可讓您根據特定字型指標，修剪這個內部前置字元。將文字方塊裁剪至大寫高度 (大寫字母頂端) 和字母基準線 (多數字母底部)，即可確保元素的定界框與視覺內容相符。
導入策略
- 必要：將
text-box-trim: trim-both(或text-box簡寫) 套用至包含文字的元素。 - 必填：使用
text-box-edge指定要用於修剪的指標。如要對齊大部分 UI，請使用cap alphabetic。 - 建議使用這項屬性，在彈性或格線容器中，將內容垂直置中。
- 建議使用這項功能，確保 CSS
padding值與文字和容器邊緣之間的視覺間距相符。 - 請勿用於長篇內文，因為這類文字需要傳統行距才能確保可讀性。最適合用於標題、按鈕和 UI 標籤。
導入指南
用途 1：修剪徽章的內部前置字元
不同字型的文字上下內建間距也不同。這可能會導致設計不一致，或文字無法在徽章中置中。如要讓容器的邊框間距完全貼合文字，請使用 text-box: trim-both cap alphabetic。這對於徽章或標記等密集 UI 元件特別有用。這樣一來，內邊距就會從文字邊緣開始。
.badge {
padding: 10px;
background: hotpink;
border-radius: 10px;
/*
Trims the top to the cap-height and
the bottom to the alphabetic baseline.
*/
text-box: trim-both cap alphabetic;
}
應用實例 2：文字置中並加上圖示
使用 Flexbox 對齊文字和圖示時，「幽靈空間」通常會讓文字看起來稍微偏離中心。修剪方塊可確保版面配置引擎使用實際可見的字母高度進行對齊。
.button {
display: inline-flex;
align-items: center;
gap: 8px;
}
/*
text-box does NOT inherit, and must be applied directly to the text element.
*/
.button-text{
/*
The flex container now centers against the
visible letters, not the invisible font box.
*/
text-box: trim-both cap alphabetic;
}
應用實例 3：將文字與頂端邊緣對齊
如要將標題與相鄰圖片或裝飾元素的頂端完美對齊，請使用 trim-start cap alphabetic。即使不修剪結尾，也必須定義結尾邊緣。
.hero {
display: flex;
align-items: flex-start;
}
h1 {
/* MANDATORY: The bottom edge must also be defined, even though only the top is trimmed. */
text-box: trim-start cap alphabetic;
}
最佳做法
- 建議使用
text-box簡寫，讓程式碼更簡潔：text-box: <trim-direction> <edges>。 - 務必指定兩側邊緣，即使只修剪一側也一樣 (除非使用預設的
text邊緣)。 - 建議搭配
line-height，控管間距。修剪功能會移除文字第一行和最後一行的前置字元，但line-height仍會影響多行文字的行距。 - 請勿套用至所有元素。請只在需要精確對齊時使用。
備用策略
text-box 是漸進增強功能。在不支援的瀏覽器中，文字會以預設行距顯示。版面配置仍可正常運作，但精確度會略為降低。由於舊版瀏覽器會安全地忽略這些屬性，因此不需要特殊的備用程式碼。
其他考量
- 字型指標：不同字型有不同的內部指標。
cap alphabetic是可靠的預設值，但某些字型或用途可能需要ex(x 高度)，才能更妥善地對齊小寫字母。 - 多行文字：修剪功能會套用至區塊的第一行和最後一行。內部線路不受影響。