Dalam tutorial sebelumnya kita membahas tentang membuat margin  di tutorial kali ini kita membahas tentang padding, hampir sama seperti margin,

Pengertian Padding

padding di gunakan untuk memberi jarak akan tetapi padding memberi jarak di dalam objek yang kita beri nilai padding. padding biasanya digunakan untuk memberi jarak antara box dengan object lainya

contohnya dalam tutorial sebelumya kita bisa lihat jarak antara text dan box saling berdekatan.tidak ada jarak sama sekali, merapat ke sisi box tersebut. Untuk itu property paddinglah yang akan memberikan jarak antara konten elemen dengan elemen tersebut.

Sebagai contoh coba perhatikan code dibawah ini :

Terlihat bahwa ada jarak antara text dengan sisi box, tidak seperti di tutorial sebelumnya dalam penggunaan margin tidak ada jarak antara text dengan sisi box.

Perlu diperhatikan juga, bahwa ketika kita menambahkan padding, ukuran .box juga akan berubah. Misalnya kita menentukan ukuran lebar dari div sebesar 100px. Ketika kita menambahkan padding-left sebesar 20px, maka total lebar dari div tersebut menjadi 120px.

Jadi jika anda ingin ukuran .box tetap 100px, kita harus menghitung ulang width dari box tersebut. Misalnya kita ubah menjadi 80px. Dengan begitu, 80px + 20px menjadi 100px.

untuk penulisan padding sama seperti margin terdapat dua penulisan dan untuk propertipun seperti berikut :

CSS memiliki properti untuk menentukan padding untuk setiap sisi elemen:

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

Semua properti padding dapat memiliki nilai-nilai berikut:

  • length – menentukan padding dalam px, pt, cm, dll.
  • % – menentukan padding dalam% dari lebar elemen yang mengandung
  • mewarisi – menentukan bahwa padding harus diwarisi dari elemen induk

Catatan: Nilai negatif tidak diizinkan.

begitulah penggunaan padding di css, untuk tutorial selanjutnya kita akan membahas penggunaan padding di css, salam coder.