Mengenal CSS Padding: Biar Elemen Nggak Nempel Terus! (Tutorial CSS Part 23)

Gambar 23 : Logo CSS

Kalau kamu lagi ngulik CSS buat styling tampilan web, pasti pernah ketemu istilah padding. Nah, si padding ini sering bikin pemula bingung: "Bedanya padding sama margin apa sih?" atau "Kapan gue harus pakai padding?"

Tenang aja, di artikel ini kita bakal ngebahas semua tentang CSS Padding, mulai dari dasar sampai cara pakai properti shorthand yang bisa bikin kodenya lebih ringkas. Siap? Gas!

1. Apa Itu CSS Padding?

Sederhananya, padding itu ruang kosong di dalam elemen. Kalau kamu bayangin sebuah kotak, padding itu kayak bantalan empuk antara isi kotak (misalnya teks atau gambar) dan garis pinggirnya (border).

🔍 Gampangnya:

Padding = ruang antara konten & border

Contoh sederhana:

div {
  padding: 20px;
}

Artinya semua sisi dalam kotak (atas, kanan, bawah, kiri) punya jarak 20px dari kontennya.

Contoh kode dengan internal CSS:

<!DOCTYPE html>
<html>
<head>
  <style>
    .box1 {
      padding: 20px;
      border: 2px solid black;
      background-color: lightblue;
    }
  </style>
</head>
<body>
  <div class="box1">Ini kotak dengan padding 20px</div>
</body>
</html>

Hasilnya:

Gambar 23.1 : Contoh CSS padding

2. Padding - Individual Sides

Kadang kamu nggak mau semua sisi punya padding yang sama. Mungkin cuma mau jarak dari atas atau bawah aja? Tenang, CSS kasih kita kebebasan buat atur padding tiap sisi secara individual:

padding-top: 10px;
padding-right: 15px;
padding-bottom: 20px;
padding-left: 5px;

Keterangan:

padding-top: buat bagian atas
padding-right: buat sisi kanan
padding-bottom: buat bawah
padding-left: buat kiri

Kamu bisa atur sesuai kebutuhan. Nggak harus semua dipakai, bisa satuan juga.

Contoh kode menggunakan internal CSS:

<!DOCTYPE html>
<html>
<head>
  <style>
    .box2 {
      padding-top: 10px;
      padding-right: 15px;
      padding-bottom: 20px;
      padding-left: 5px;
      border: 2px solid black;
      background-color: lightgreen;
    }
  </style>
</head>
<body>
  <div class="box2">Padding tiap sisi beda-beda nih!</div>
</body>
</html>

Hasilnya:

Gambar 23.2 : Contoh CSS padding tiap sisi berbeda

3. Padding - Shorthand Property

Nah, biar nggak nulis panjang lebar kayak di atas, kamu bisa pakai shorthand padding. Ini cara singkat buat nulis padding dalam satu baris aja.

padding: 10px 20px 30px 40px;

Artinya:

Atas = 10px
Kanan = 20px
Bawah = 30px
Kiri = 40px

📌 Urutannya searah jarum jam: top → right → bottom → left

Atau:

padding: 20px; → semua sisi 20px
padding: 10px 20px; → atas & bawah 10px, kiri & kanan 20px
padding: 10px 15px 5px; → atas 10px, kiri & kanan 15px, bawah 5px

Hemat baris, hidup jadi lebih ringan~ 😎

Contoh kode menggunakan internal CSS:

<!DOCTYPE html>
<html>
<head>
  <style>
    .box3 {
      padding: 10px 20px 30px 40px;
      border: 2px solid black;
      background-color: lightcoral;
    }
  </style>
</head>
<body>
  <div class="box3">Shorthand padding: top right bottom left</div>
</body>
</html>

Hasilnya:

Gambar 23.3 : Contoh CSS padding cara ringkas

4. Padding dan Lebar Elemen (Element Width)

Ini penting banget! Banyak yang bingung kenapa lebar elemen jadi lebih besar dari yang ditentukan. Jawabannya sering kali karena padding!

Misalnya:

div {
  width: 200px;
  padding: 20px;
}

Secara default, width = konten aja, padding nambahin ruang dari sisi dalam, jadi total lebar bisa jadi 240px (200 + 20 kiri + 20 kanan).

Contoh kode menggunakan internal CSS:

<!DOCTYPE html>
<html>
<head>
 
  <style>
      .box4 {
        width: 200px;
        padding: 20px; 
        border: 2px solid black;
        background-color: peachpuff;
          }
  </style>
</head>
<body>
       
  <div class="box4">Lebarnya nambah karena padding!</div>
</body>
</html>

Hasilnya:

Gambar 23.4 : Contoh CSS padding dan width

🤯 Solusi biar nggak bingung? Pakai:

box-sizing: border-box;

Dengan border-box, padding dan border bakal ikut dihitung ke dalam lebar elemen, bukan nambahin lebar total. Recommended banget!

Contoh kode menggunakan internal CSS:

<!DOCTYPE html>
<html>
<head>
 
  <style>
      .box4-fixed {    
        width: 200px;
        padding: 20px;
        border: 2px solid black;
        background-color: plum;
        box-sizing: border-box; 
  }
  </style>
  </head>
  <body>
   
  <div class="box4-fixed">Lebarnya tetap 200px karena pakai
  border-box</div>
  </body>
  </html>

Hasilnya:

Gambar 23.5 : Contoh CSS border-box

5. Daftar Properti Padding (Tabel Lengkap)

Properti	Fungsi
`padding`	Shorthand untuk semua sisi
`padding-top`	Atur jarak dari sisi atas
`padding-right`	Atur jarak dari sisi kanan
`padding-bottom`	Atur jarak dari sisi bawah
`padding-left`	Atur jarak dari sisi kiri

📝 Catatan:

Semua nilai padding bisa pakai satuan: px, em, %, dll.
Jangan lupa padding nggak kelihatan kalau background-nya transparan, jadi kadang butuh dikasih warna buat ngecek.

Penutup

Padding emang kelihatan sepele, tapi kalau nggak ngerti bisa bikin tampilan webmu jadi berantakan. Dengan ngerti cara kerja padding — baik individual maupun shorthand — kamu bisa lebih leluasa ngatur layout, biar elemen nggak "mepet-mepet" dan lebih enak dilihat.

Oh iya, jangan lupa kombinasikan sama margin dan box-sizing buat hasil maksimal. Selamat styling dan semoga layout-mu makin kece! 🚀

Kalau kamu ada pertanyaan atau mau request topik CSS lainnya, tinggal komen aja ya 😉

filesop.com

Mengenal CSS Padding: Biar Elemen Nggak Nempel Terus! (Tutorial CSS Part 23)

1. Apa Itu CSS Padding?

2. Padding - Individual Sides

3. Padding - Shorthand Property

4. Padding dan Lebar Elemen (Element Width)

5. Daftar Properti Padding (Tabel Lengkap)

Penutup

Posting Komentar untuk "Mengenal CSS Padding: Biar Elemen Nggak Nempel Terus! (Tutorial CSS Part 23)"

Menu Halaman Statis