Kita buka lagi kode dari pelajaran sebelumnya. Sebelum kita melanjutkan, ada beberapa properti yang perlu kita atur terlebih dahulu.

Pertama kita tambahkan properti border pada paragraf pertama dengan nilai 5px solid black.

Lalu kita hapus margin pada paragraf kedua. Dan kita samakan width, height dan bordernya dengan paragraf pertama. Untuk properti overflow kita ganti menjadi hidden.

Nah, sekarang kita sudah memiliki dua buah kotak dengan ukuran yang sama. Dan kita akan mencoba untuk memberikan padding pada paragraf pertama. Kita tambahkan properti padding dan kita beri nilai 50 px. Kita simpan dan refresh browser.

Sekarang paragraf pertama sudah memiliki padding. Dan kita akan memperhatikan bagaimana behaviour dari padding.

Pertama kita lihat dari ukuran kotaknya itu sendiri. Kotak paragraf pertama menjadi lebih besar dari kotak paragraf kedua, padahal sebelum ditambah padding ukuran keduanya adalah sama. Sebenarnya ukuran konten dari kedua kotak pada saat ini adalah sama yaitu 200x150 pixel. Namun pada paragraf pertama browser menambahkan jarak antara border dengan konten sebesar 50 pixel.

Perhatikan bahwa padding tetap memiliki warna sesuai dengan background color paragraf pertama. Berbeda dengan margin ya. Kalau misalkan saya menambahkan juga properti margin dengan ukuran 100 pixel pada paragraf pertama. Perhatikan bahwa margin tidak menggunakan background color dari paragraf pertama. Kita hapus lagi marginnya.

Perbedaan selanjutnya adalah padding tidak bisa menggunakan nilai auto dan nilai negatif. Sebagai contoh, kita ubah properti padding menjadi padding-left dengan nilai auto dan padding-right dengan nilai auto. Pada saat kita refresh, maka kotak paragraf pertama tidak ada perubahan sama sekali.

Sebagai contoh kedua, kita ubah padding-left menjadi nilai -30px. Dan kita hapus padding-right. Kita simpan dan refresh browser. Tetap sama ya. Jadi kita tidak bisa menggunakan nilai auto dan nilai negatif untuk padding.

Cara menulis kode padding masih mirip dengan cara menulis kode margin ya. Kita bisa menggunakan properti padding-top untuk memberikan padding khusus bagian atas kotak saja. Padding-right untuk bagian kanan. Padding-bottom untuk bagian bawah. Dan padding-left untuk bagian kiri.

Kita juga bisa menyingkat kode kita dengan menggunakan properti padding. Kalau kita memberikan satu nilai saja, maka nilai tersebut akan digunakan di keempat sisi padding. Apabila kita memberikan dua nilai, maka nilai pertama akan digunakan untuk padding bagian atas dan bawah, sedangkan nilai kedua akan digunakan untuk padding bagian kiri dan kanan.

Apabila kita memberikan tiga nilai, maka nilai pertama akan digunakan untuk padding atas. Nilai kedua untuk padding kiri dan kanan. Sedangkan padding ketiga untuk padding bawah.

Apabila kita memberikan empat nilai, maka nilai pertama akan digunakan untuk padding atas. Nilai kedua untuk padding kanan. Nilai ketiga untuk padding bawah. Dan nilai keempat untuk padding kiri.

Dalam prakteknya, padding ini sering kali digunakan pada button. Sebagai contoh, pada bagian paling bawah ada Formulir Pendaftaran dengan tombol Daftar.

Kita buat selector untuk memilih tombol tersebut. Kebetulan dalam contoh ini tombol dibuat menggunakan elemen input. Jadi kita harus menggunakan attribute selector input[type=”button”]. Pertama kita tambahkan dahulu margin untuk memberi jarak dengan textbox diatasnya. Kita beri nilai vertikal 30px dan horizontalnya 0. Lalu kita tambahkan padding dengan nilai vertikal 10px dan horizontal 30px.

Kita simpan dan refresh browser. Sekarang tombol Daftar sudah menjadi lebih besar, sedangkan tulisan Daftarnya tetap ukuran normal. Tombol seperti ini akan menjadi semakin gampang dilihat, dan semakin gampang untuk diklik, sehingga dapat meningkatkan nilai konversi situs kita.

Dan kalau kita klik kanan pada tombol Daftar, lalu pilih Inspect. Kita bisa melihat seluruh komponen yang berada di dalam CSS Box Model tombol tersebut. Margin digambarkan dengan warna orange. Border dengan warna kuning. Padding dengan warna hijau. Dan bagian paling dalamnya yaitu konten berwarna biru.

Dengan menggunakan fasilitas tanya jawab, maka Anda bisa bertanya dan akan dijawab langsung oleh instruktur kursus.

Anda belum terdaftar pada kursus ini sehingga tidak bisa mengajukan pertanyaan.