Digital Transformation
CSS text-box-trim (Property)
TL;DR: CSS text-box-trim adalah properti modern yang memangkas ruang kosong bawaan font di sekitar teks (leading), sehingga tinggi text box sama dengan tinggi glyph. Dipakai bersama text-box-edge untuk menghilangkan padding atas/bawah manual di tombol, badge, dan heading hero.
Apa itu CSS text-box-trim?
CSS text-box-trim adalah properti yang menginstruksikan browser untuk memotong leading box atas, bawah, atau keduanya pada elemen teks. Hasilnya, kotak teks menempel ke baseline dan cap-height tanpa offset font default. Properti ini berdampingan dengan CSS text-spacing-trim yang berfungsi memangkas spasi karakter, bukan kotak teks. Sebelum properti ini, developer harus menebak offset font lewat trial-and-error padding.
Nilai yang Sering Dipakai
| Nilai | Efek | Use case |
|---|---|---|
trim-start | Potong leading atas | Heading di hero supaya rata atas |
trim-end | Potong leading bawah | Tombol agar tinggi konsisten |
trim-both | Potong atas & bawah | Badge, chip, label pendek |
none | Default browser | Fallback aman |
Gabungkan dengan text-box-edge: cap alphabetic untuk hasil paling presisi pada heading display.
Kenapa Penting?
Untuk pebisnis Indonesia yang membangun website Next.js, properti ini mengurangi 2 sampai 5 override line-height manual per komponen heading. Dari pengalaman Vito Atmo memigrasi sistem desain Atmo (LMS) ke Tailwind v4, pemasangan text-box-trim memangkas padding manual di 12 komponen tombol dan menstabilkan tinggi card produk Nalesha. Detail spesifikasi tersedia di MDN web docs untuk text-box-trim.
Pertanyaan Umum
Apakah text-box-trim sudah didukung semua browser?
Per April 2026, dukungan baseline ada di Chrome dan Safari versi terbaru. Sediakan fallback padding untuk Firefox lama lewat @supports.
Apa beda text-box-trim dan line-height?
Line-height mengatur tinggi baris isi (termasuk leading). Text-box-trim memangkas leading itu sendiri dari kotak elemen, sehingga lebih presisi untuk tata letak ketat.
Istilah Terkait