Jika pada tutorial sebelumnya kita telah membahas cara mengatur margin maka kali ini kita akan membahas cara mengatur padding di css. Padding adalah sebuah ruang didalam elemen antara konten dengan border, padding biasanya digunakan agar sebuah konten pada website tidak bertabrakan dengan batas elemen didalamnya sehingga dapat merusak tampilan dari website tersebut.
Berikut ini adalah properti-properti padding yang akan dibahas didalam tutorial ini.
- padding properti singkat untuk mengatur seluruh padding bagian elemen dalam satu deklarasi
- padding-top properti untuk mengatur padding bagian atas
- padding-bottom properti untuk mengatur padding bagian bawah
- padding-left properti untuk mengatur padding bagian kiri
- padding-right properti untuk mengatur padding bagian kanan
Kita akan membahas properti diatas berserta source code lengkap agar mudah dipahami dan dipraktekan.
Cara Mengatur Padding Di CSS
Untuk mengatur padding agar ruang atau jarak padding didalam elemen tersebut dapat terlihat kita akan membuat garis pembatas antara elemen dengan konten, yaitu dengan membuat border telebih dahulu.
Properti padding yang pertama kita bahas adalah properti singkat padding untuk mengatur seluruh bagian elemen dalam satu deklarasi, berikut ini kodenya.
padding: 10px 10px 10px 10px;Code language: HTTP (http)Dari sintaks diatas terlihat bahwa seluruh elemen memiliki ruang didalam elemen tersebut dengan jarak masing-masing 10 pixel. Berikut ini adalah penjelasan posisi-posisi padding dari kode diatas.
Apabila ingin mengatur padding yang berbeda pada posisi tertentu yang perlu dilakukan hanya mengubah nilai-nilai dari masing-masing telah posisi padding pada kode diatas. Berikut ini source code lengkap padding.
<!DOCTYPE html>
<html>
<head>
  <title>Padding</title>
  <style type="text/css">
  .padding {
    border: 1px solid #000;
    padding: 10px 10px 10px 10px;
  }
  </style>
</head>
<body>
  <div class="padding">
    Konten padding
  </div>
</body>
</html>Code language: HTML, XML (xml)dan berikut ini tampilan dari kode diatas…
Selain dengan mendeklarasikan ke empat nilai diatas, cara mengatur padding di css juga bisa dilakukan hanya dengan menggunakan satu nilai saja, syaratnya apabila memiliki nilai yang sama.
padding: 10px;Code language: HTTP (http)Sintaks padding diatas artinya seluruh bagian elemen memiliki jarak 10px antara konten dengan elemen html didalamnya.
Bagaimana cara mengatur padding hanya bagian tersentu saja?
Untuk mengatur padding bagian tertentu saja bisa dilakukan dengan menambahkan posisi pada properti padding-[posisi] yang di inginkan, misalnya contoh sintaks dibawah ini yaitu padding hanya diberikan pada bagian atas elemen saja.
padding-top: 10px;Code language: HTTP (http)Padding-top digunakan untuk menentukan ruang pada elemen bagian atas, untuk elemen-elemen lainnya bisa mengikuti referensi diawal artikel, berikut ini masing-masing posisi padding dalam elemen.
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;Code language: HTTP (http)Kode-kode diatas akan sangat berguna untuk menentukan padding hanya bagian tertentu saja, meskpun tidak dipungkiri bahwa hanya dengan menggunakan kode yang pertama juga bisa.
