Belajar DIV dalam HTML
Styling dengan CSS

oleh: Suryo Adhy Chandra, ST

Apa itu <div>?

<div> adalah elemen blok dalam HTML yang digunakan sebagai wadah (container) untuk elemen-elemen lainnya. Dengan menggunakan CSS, kita bisa mengatur tampilan <div> — mulai dari posisi kontennya, jarak antar elemen, sudut yang membulat, hingga efek bayangan.

Pada materi ini kita akan belajar 6 properti CSS yang sering digunakan pada <div>:

  • align-items – mengatur posisi item secara vertikal (di dalam flexbox)
  • justify-content – mengatur posisi item secara horizontal (di dalam flexbox)
  • padding – jarak antara konten dan batas dalam elemen
  • margin – jarak antara elemen dengan elemen lain di luar
  • border-radius – membuat sudut elemen menjadi membulat
  • box-shadow – menambahkan efek bayangan pada elemen

1. align-items

align-items digunakan di dalam elemen yang memiliki display: flex. Properti ini mengatur posisi anak-anak elemen (flex items) secara vertikal (sumbu silang / cross axis).

Ada 3 nilai yang sering dipakai:

align-items: flex-start

div { display: flex; align-items: flex-start; height: 120px; }

Hasil:

Kotak

Kotak menempel di atas

align-items: center

div { display: flex; align-items: center; height: 120px; }

Hasil:

Kotak

Kotak berada di tengah secara vertikal

align-items: flex-end

div { display: flex; align-items: flex-end; height: 120px; }

Hasil:

Kotak

Kotak menempel di bawah

2. justify-content

justify-content juga digunakan pada elemen dengan display: flex. Properti ini mengatur posisi anak-anak elemen secara horizontal (sumbu utama / main axis).

justify-content: flex-start

div { display: flex; justify-content: flex-start; }

Hasil:

Kotak

Kotak menempel di kiri

justify-content: center

div { display: flex; justify-content: center; }

Hasil:

Kotak

Kotak berada di tengah secara horizontal

justify-content: flex-end

div { display: flex; justify-content: flex-end; }

Hasil:

Kotak

Kotak menempel di kanan

Apa perbedaan align-items dan justify-content?

Keduanya sama-sama mengatur posisi elemen di dalam flexbox, tapi arahnya berbeda:

Properti Mengatur arah Analogi
justify-content Horizontal (kiri ↔ kanan) Menggeser kotak ke kiri, tengah, atau kanan
align-items Vertikal (atas ↕ bawah) Menggeser kotak ke atas, tengah, atau bawah

Cara mudah mengingatnya: justify = sumbu mendatar (horizontal), align = sumbu tegak (vertikal). Jika ingin elemen berada tepat di tengah-tengah container, gunakan keduanya sekaligus:

div { display: flex; justify-content: center; /* tengah horizontal */ align-items: center; /* tengah vertikal */ }

Hasilnya:

Kotak

3. padding

padding adalah jarak antara konten di dalam elemen dengan batas (border) elemen itu sendiri. Bayangkan padding seperti bantalan di dalam kotak.

/* Semua sisi sama */ div { padding: 20px; } /* Atas-Bawah | Kiri-Kanan */ div { padding: 10px 30px; } /* Atas | Kiri-Kanan | Bawah */ div { padding: 5px 20px 10px; } /* Atas | Kanan | Bawah | Kiri */ div { padding: 5px 10px 15px 20px; }

padding: 0px

Teks di dalam

padding: 16px

Teks di dalam

padding: 32px

Teks di dalam

Semakin besar nilai padding, semakin lebar "bantalan" antara teks dan tepi kotak.

4. margin

margin adalah jarak antara elemen dengan elemen lain di luar. Kalau padding adalah bantalan di dalam kotak, maka margin adalah jarak antar kotak.

/* Semua sisi sama */ div { margin: 20px; } /* Atas-Bawah | Kiri-Kanan */ div { margin: 10px 30px; } /* Atas | Kanan | Bawah | Kiri */ div { margin: 5px 10px 15px 20px; } /* Tengah secara horizontal */ div { margin: 0 auto; }
margin: 4px
margin: 20px
margin: 40px

Perhatikan jarak antara setiap kotak biru dan tepi abu-abu berubah sesuai nilai margin.

Margin Negatif

Margin juga bisa diberi nilai negatif. Kalau margin positif mendorong elemen menjauh, margin negatif justru menarik elemen ke arah sebaliknya — sehingga elemen bisa tumpang tindih (overlap) dengan elemen di sekitarnya.

div { margin-top: -20px; } /* elemen naik 20px, menabrak elemen di atasnya */ div { margin-left: -30px; } /* elemen geser ke kiri 30px */

Contoh visual — perhatikan kotak merah ditarik ke atas menimpa kotak biru:

Kotak pertama (normal)
Kotak kedua — margin-top: -18px (naik, menimpa kotak pertama)
Kotak ketiga (normal kembali)

Kapan margin negatif digunakan?

  • Membuat elemen keluar dari container secara sebagian (efek desain)
  • Mendekatkan dua elemen yang jaraknya terlalu renggang
  • Membuat efek tumpang tindih (overlap) antar elemen seperti kartu bertumpuk
  • Menyesuaikan posisi elemen tanpa mengubah struktur HTML

Catatan: gunakan margin negatif dengan hati-hati karena bisa membuat tampilan berantakan jika tidak dikontrol dengan baik.

Apa perbedaan margin dan padding?

Keduanya mengatur jarak / ruang kosong, tapi posisinya berbeda:

Properti Posisi jarak Analoginya
padding Di dalam elemen — antara konten dan border Bantalan di dalam kotak
margin Di luar elemen — antara elemen dengan elemen lain Jarak antar kotak

Perhatikan ilustrasi berikut:

KONTEN ← padding →

Area hijau muda di dalam border = padding.  |  Jarak antara border dan tepi area abu-abu = margin.

Poin penting lainnya:

  • Padding ikut memperbesar ukuran elemen secara visual (background warna ikut memenuhi area padding)
  • Margin tidak memiliki warna — selalu transparan, hanya ruang kosong di luar elemen
  • Margin bisa bernilai negatif, padding tidak bisa negatif

5. border-radius

border-radius digunakan untuk membuat sudut-sudut elemen menjadi membulat. Semakin besar nilainya, semakin bulat sudutnya.

div { border-radius: 0px; } /* kotak biasa */ div { border-radius: 8px; } /* sedikit membulat */ div { border-radius: 16px; } /* lebih membulat */ div { border-radius: 50%; } /* lingkaran penuh */

0px

0px

8px

8px

16px

16px

24px

24px

50%

50%

6. box-shadow

box-shadow menambahkan efek bayangan pada elemen. Format penulisannya:

box-shadow: [offset-x] [offset-y] [blur] [spread] [warna];

Penjelasan setiap nilai:

  • offset-x: geser bayangan ke kanan (positif) atau kiri (negatif)
  • offset-y: geser bayangan ke bawah (positif) atau atas (negatif)
  • blur: seberapa kabur bayangan (semakin besar semakin kabur)
  • spread: seberapa lebar bayangan menyebar
  • warna: warna bayangan — bisa ditulis dengan nama warna, rgb, atau rgba

Warna menggunakan nama warna (red, green, blue, yellow)

div { box-shadow: 4px 4px 10px red; } div { box-shadow: 4px 4px 10px green; } div { box-shadow: 4px 4px 10px blue; } div { box-shadow: 4px 4px 10px yellow; }

Tanpa shadow

red

green

blue

yellow

Warna menggunakan rgb(merah, hijau, biru)

rgb() menggunakan 3 angka untuk menentukan warna. Setiap angka bernilai 0 – 255, mewakili intensitas warna Red (Merah), Green (Hijau), dan Blue (Biru).

div { box-shadow: 4px 4px 10px rgb(255, 0, 0); } /* merah penuh */ div { box-shadow: 4px 4px 10px rgb(0, 200, 0); } /* hijau */ div { box-shadow: 4px 4px 10px rgb(0, 0, 255); } /* biru penuh */ div { box-shadow: 4px 4px 10px rgb(255, 200, 0); } /* kuning keemasan */

rgb(255,0,0)

rgb(0,200,0)

rgb(0,0,255)

rgb(255,200,0)

Warna menggunakan rgba(merah, hijau, biru, alpha)

rgba() sama seperti rgb(), namun ditambahkan satu nilai lagi yaitu alpha. Alpha mengatur tingkat transparansi (kejernihan) warna, dengan nilai:

  • 0 = sepenuhnya transparan (tidak terlihat)
  • 0.5 = setengah transparan
  • 1 = sepenuhnya terlihat (seperti rgb biasa)
/* rgba(merah, hijau, biru, alpha) */ div { box-shadow: 4px 4px 10px rgba(255, 0, 0, 1); } /* merah, tidak transparan */ div { box-shadow: 4px 4px 10px rgba(255, 0, 0, 0.5); } /* merah, setengah transparan */ div { box-shadow: 4px 4px 10px rgba(255, 0, 0, 0.1); } /* merah, hampir transparan */ div { box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.2); } /* hitam transparan (bayangan umum) */

rgba(255,0,0,1)

alpha = 1 (penuh)

rgba(255,0,0,0.5)

alpha = 0.5 (50%)

rgba(255,0,0,0.1)

alpha = 0.1 (10%)

rgba(0,0,0,0.2)

bayangan umum

rgba(59,130,246,0.7)

glow biru

Yuk Coba Sendiri!

Coba salin dan tempelkan kode di bawah ini ke dalam file HTML kamu, lalu coba ubah-ubah nilainya dan lihat apa yang terjadi:

<!DOCTYPE html> <html> <head> <style> .kotak-saya { display: flex; align-items: center; justify-content: center; padding: 20px; margin: 30px auto; border-radius: 16px; box-shadow: 4px 4px 12px rgba(0,0,0,0.25); background-color: #dbeafe; width: 200px; height: 100px; } </style> </head> <body> <div class="kotak-saya"> Halo, Dunia! </div> </body> </html>

Setelah berhasil, coba tantangan berikut:

  • Ubah align-items: center menjadi flex-start — apa yang berubah?
  • Ubah border-radius dari 16px menjadi 50% — apa bentuknya sekarang?
  • Ubah box-shadow menjadi 0px 0px 20px rgba(59,130,246,0.8) — apa efeknya?
  • Coba ubah padding dan margin ke nilai yang berbeda-beda!
← Kembali Ke Daftar Pelajaran Input dalam HTML