Halo teman-teman semuanya, setelah kita mempelajari bagaimana menata teks menggunakan Tailwind CSS, sekarang kita akan membahas bagaimana mengatur tata letak (layout) elemen dengan menggunakan dua properti paling dasar dalam CSS, yaitu margin dan padding.
Kedua properti ini sangat penting dalam proses penyusunan antarmuka web. Dengan bantuan utility class dari Tailwind, kita bisa menambahkan jarak luar (margin) dan jarak dalam (padding) ke setiap elemen HTML tanpa menulis kode CSS manual.
Apa Itu Margin dan Padding?
- Margin: Jarak luar antara elemen dengan elemen lain di sekitarnya.
- Padding: Jarak dalam antara konten elemen dengan batas elemen tersebut.
Tabel Class Margin
Tailwind CSS menggunakan awalan m- untuk margin, dan ada varian lainnya seperti:
| Class |
Fungsi |
m-4 |
Memberi margin di semua sisi (1rem) |
mt-2 |
Margin atas saja |
mb-6 |
Margin bawah saja |
ml-3 |
Margin kiri saja |
mr-5 |
Margin kanan saja |
mx-4 |
Margin horizontal (kiri dan kanan) |
my-2 |
Margin vertikal (atas dan bawah) |
m-auto |
Margin otomatis (biasanya untuk center elemen) |
Semua angka setelah m- merujuk pada skala spacing Tailwind (misal: 4 = 1rem, 8 = 2rem, dst).
Tabel Class Padding
Untuk padding, Tailwind menggunakan awalan p-, dan variasinya pun mirip dengan margin:
| Class |
Fungsi |
p-6 |
Padding di semua sisi |
pt-2 |
Padding atas |
pb-4 |
Padding bawah |
pl-3 |
Padding kiri |
pr-3 |
Padding kanan |
px-5 |
Padding horizontal |
py-2 |
Padding vertikal |
Seperti margin, angka pada class padding juga mengikuti skala Tailwind.
Kombinasi Margin & Padding
Kita bisa menggabungkan class margin dan padding sesuai kebutuhan, misalnya:
<div class="p-4 mt-4 mb-2">
<!-- isi elemen -->
</div>
Class di atas akan memberikan padding di semua sisi sebesar 1rem, margin atas sebesar 1rem, dan margin bawah sebesar 0.5rem.
Contoh Lengkap: Kartu dengan Spacing
Untuk mempraktikkan penggunaan class margin dan padding:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Layout Spacing</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 p-6">
<div class="max-w-md mx-auto bg-white p-6 rounded-lg shadow-lg">
<h2 class="text-xl font-bold text-gray-800 mb-4">Judul Kartu</h2>
<p class="text-gray-700 mb-6">
Ini adalah contoh kartu sederhana dengan padding di dalam dan margin antar elemen yang rapi.
</p>
<button class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 transition">
Klik Saya
</button>
</div>
</body>
</html>
Di dalam contoh tersebut, kita menggunakan p-6 untuk memberi ruang dalam ke seluruh konten, lalu mb-4 dan mb-6 untuk mengatur jarak antar elemen seperti judul dan paragraf. Tombol juga diberi padding horizontal dan vertical dengan px-4 dan py-2.
Kesimpulan
Mengatur layout dengan menggunakan margin dan padding sangat penting dalam membangun struktur tampilan yang bersih dan teratur.
Tailwind CSS mempermudah proses ini dengan menyediakan utility class yang fleksibel dan mudah diingat. Dengan hanya menambahkan beberapa class seperti mt-4, px-6, atau p-2, kita bisa mengatur jarak antar elemen dengan sangat cepat.
Di artikel berikutnya, kita akan mulai membahas tentang penggunaan warna, background, dan border untuk mempercantik tampilan komponen kita.
Terima Kasih