Cara Cepat Mengatur Margin dan Padding (Shorthand) Bagi Pemula - XWAPPER

Pernahkah Anda melihat kode CSS seperti padding: 10px 5px 15px 20px; ? Bagi yang masih pemula seperti saya, mungkin bingung mana pengaturan atas, bawah, kanan dan kiri.

Mungkin lebih gambang menuliskannya dengan arah masing-masing, misalnya: padding-top: 20px, padding-right:5px, padding-bottom: 15px, padding-left:20px. Tapi ini kan melelahkan dan merepotkan.

Daripada menulis empat baris kode untuk satu elemen, kita bisa menyingkatnya dalam satu baris menggunakan metode Shorthand. Urutannya Searah Jarum Jam.

Cara paling mudah untuk mengingat urutan Margin dan Padding adalah dengan membayangkan Jarum Jam. Dimulai dari atas dan berputar ke kanan.

Urutannya adalah: ATAS → KANAN → BAWAH → KIRI

Contoh kode:

.xwapper-box {
    padding: 10px 20px 15px 5px;
}

10px: Jarak Atas (Top)
20px: Jarak Kanan (Right)
15px: Jarak Bawah (Bottom)
5px: Jarak Kiri (Left)

Berbagai Variasi Singkatan

Kita tidak selalu harus menulis 4 angka. CSS sangat fleksibel:

• Nilai (padding: 10px;): Berlaku untuk semua sisi (atas, kanan, bawah, kiri semuanya 10px).
• Nilai (padding: 10px 20px;): Angka pertama untuk Atas-Bawah, angka kedua untuk kanan-kiri.
• Nilai (padding: 10px 20px 15px;): Atas (10px), Kanan-Kiri (20px), dan Bawah (15px).

Tambahan

Jika Anda ingin memberikan jarak yang sama antara kanan dan kiri (misalnya agar konten berada di tengah), Anda bisa menggunakan nilai auto pada margin, contohnya: margin: 0 auto.