Kontrol Spasi & Dimensi

Kenapa ini penting

Desain yang terasa "profesional" sering kali bukan karena warnanya, tetapi karena jaraknya. Ruang kosong (whitespace) yang konsisten membuat mata mudah mengelompokkan informasi. Sebaliknya, jarak yang acak (13px di sini, 17px di sana) membuat halaman terasa berantakan meskipun kamu tidak bisa langsung menjelaskan kenapa.

Ukuran elemen juga sama pentingnya: gambar yang meluber keluar kartu, tombol yang terlalu sempit di HP, atau kolom teks yang terlalu lebar di monitor besar adalah masalah sehari-hari. Modul ini membahas semua utility untuk jarak dan ukuran.

Konsep inti

Padding dan margin

Pola: {p|m}{sisi}-{nilai}.

Margin bisa negatif dengan tanda minus di depan: -mt-4. Margin juga punya mx-auto untuk menengahkan blok yang punya lebar.

Analogi: padding itu seperti busa di dalam kardus (ruang di dalam kotak), margin itu seperti jarak antar kardus di gudang (ruang di luar kotak).

Gap dan space

• gap-4, gap-x-6, gap-y-2 mengatur jarak antar anak di dalam flex atau grid. Ini cara paling modern dan dianjurkan.
• space-x-4 dan space-y-4 memberi margin di antara anak-anak langsung. Berguna untuk tumpukan sederhana yang bukan flex/grid. Di v4, selector-nya diubah menjadi :not(:last-child) sehingga margin diberikan ke bawah tiap anak kecuali yang terakhir. Kalau kamu bisa memakai flex/grid, gap lebih andal.

Lebar dan tinggi

• Skala: w-64 (16rem), h-12 (3rem), angka bebas seperti di spacing.
• Pecahan: w-1/2, w-2/3, w-3/4.
• Kata kunci: w-full (100%), w-screen (100vw), w-auto, w-fit, w-min, w-max.
• Viewport modern: h-screen (100vh), h-dvh (tinggi viewport dinamis, lebih akurat di HP karena memperhitungkan bilah alamat browser), min-h-svh.
• Lebar berbasis kontainer: w-sm, w-md, w-lg, w-xl dan seterusnya memakai skala --container-*.

Min dan max

min-w-0, min-h-screen, max-w-md, max-w-prose (±65 karakter), max-w-7xl, max-h-96. Kombinasi mx-auto max-w-7xl px-4 adalah pola klasik untuk pembungkus konten halaman.

Satu trik penting: anak di dalam flex secara default punya min-width: auto, sehingga teks panjang bisa membuat elemen meluber. Tambahkan min-w-0 pada anak flex yang berisi teks panjang agar truncate bekerja.

size-*

size-10 mengatur lebar dan tinggi sekaligus (2.5rem × 2.5rem). Sangat praktis untuk avatar, ikon, dan tombol bulat. Dulu kita menulis w-10 h-10.

Aspect ratio

aspect-square (1/1), aspect-video (16/9), atau rasio bebas seperti aspect-4/3 dan aspect-3/2. Ini mencegah layout shift (halaman melompat saat gambar selesai dimuat) karena ruang untuk gambar sudah dipesan dari awal. Gabungkan dengan object-cover agar gambar terpotong rapi mengisi kotak.

Contoh kode

<!-- Pembungkus halaman klasik: lebar maksimum, di tengah, padding sisi -->
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
  <h1 class="py-8 text-3xl font-bold">Katalog</h1>
</div>

<!-- Padding vs margin -->
<div class="bg-gray-100 p-4">
  <div class="mb-6 bg-white p-6">Kotak A: padding 24px, margin bawah 24px</div>
  <div class="bg-white px-8 py-2">Kotak B: padding kiri-kanan 32px, atas-bawah 8px</div>
</div>

<!-- gap di flex: jarak antar tombol rapi tanpa margin manual -->
<div class="flex gap-3">
  <button class="rounded bg-gray-900 px-4 py-2 text-white">Simpan</button>
  <button class="rounded border px-4 py-2">Batal</button>
</div>

<!-- space-y untuk tumpukan sederhana -->
<div class="space-y-4">
  <p>Paragraf satu</p>
  <p>Paragraf dua</p>
  <p>Paragraf tiga</p>
</div>
<!-- → tiap paragraf (kecuali terakhir) mendapat margin bawah 1rem -->

<!-- size-*: avatar bulat 48x48 -->
<img src="https://i.pravatar.cc/96?img=12" alt="Avatar" class="size-12 rounded-full object-cover" />

<!-- Aspect ratio: thumbnail video 16:9 -->
<div class="w-full max-w-xl">
  <img src="https://picsum.photos/seed/video/1280/720" alt="Thumbnail" class="aspect-video w-full rounded-lg object-cover" />
</div>

<!-- min-w-0 agar truncate bekerja di dalam flex -->
<div class="flex w-72 items-center gap-3 rounded border p-3">
  <img src="https://i.pravatar.cc/80?img=3" alt="" class="size-10 shrink-0 rounded-full" />
  <div class="min-w-0">
    <p class="truncate font-medium">nama.pengguna.yang.sangat.panjang@perusahaan-besar.co.id</p>
    <p class="text-sm text-gray-500">Admin</p>
  </div>
</div>
<!-- → email terpotong dengan "..." dan tidak mendorong kartu melebar -->

<!-- Layar penuh yang akurat di HP -->
<section class="flex min-h-dvh items-center justify-center bg-indigo-600 text-white">
  Hero setinggi layar
</section>

Kesalahan umum

1. Memakai margin untuk jarak antar item flex/grid. Lebih rapi dengan gap-*, karena tidak ada margin sisa di ujung.
2. h-screen di HP membuat konten tertutup bilah alamat. Gunakan min-h-dvh atau min-h-svh.
3. Lupa min-w-0 di anak flex, sehingga truncate tidak bekerja dan layout meluber.
4. Menulis w-10 h-10 terus-menerus. Pakai size-10, lebih singkat dan tidak mungkin lupa salah satunya.
5. Gambar tanpa rasio membuat halaman melompat saat dimuat. Tambahkan aspect-* dan object-cover.

Latihan

1. Mudah, Buat kotak dengan padding 20px di semua sisi dan margin atas 40px.
2. Sedang, Buat deretan tiga ikon bulat berukuran 40×40 dengan jarak 12px di antaranya.
3. Menantang, Buat kartu artikel horizontal: gambar persegi 96px di kiri yang tidak boleh mengecil, lalu judul (maksimal 2 baris) dan tanggal di kanan. Kartu maksimal 28rem.

<div class="mt-10 bg-gray-100 p-5">Isi</div>
<!-- p-5 = 1.25rem = 20px, mt-10 = 2.5rem = 40px -->

<div class="flex gap-3">
  <span class="grid size-10 place-items-center rounded-full bg-red-100">A</span>
  <span class="grid size-10 place-items-center rounded-full bg-green-100">B</span>
  <span class="grid size-10 place-items-center rounded-full bg-blue-100">C</span>
</div>

<a href="#" class="flex max-w-md gap-4 rounded-lg border p-3 hover:bg-gray-50">
  <img src="https://picsum.photos/seed/kopi/200/200" alt="" class="size-24 shrink-0 rounded-md object-cover" />
  <div class="min-w-0">
    <h3 class="line-clamp-2 font-semibold">Panduan Lengkap Menyeduh Kopi Manual untuk Pemula di Rumah</h3>
    <p class="mt-1 text-sm text-gray-500">12 Oktober 2026</p>
  </div>
</a>

Ringkasan

• Padding = ruang di dalam, margin = ruang di luar; pola {p|m}{x|y|t|r|b|l}-{nilai}.
• Untuk jarak antar anak flex/grid, pakai gap-*; space-* untuk tumpukan sederhana.
• w-*, h-*, min-*, max-* mendukung skala, pecahan, dan kata kunci; h-dvh akurat di HP.
• size-* mengatur lebar dan tinggi sekaligus.
• aspect-* + object-cover mencegah layout shift pada gambar.