Buaya Terbang Blog

Monday, May 28, 2018

Tutorial Padding - belajar CSS

Fungsi Padding pada CSS

Padding pada css digunakan untuk membuat jarak atau ruang antara konten dengan border atau jarak dengan margin,kita dapat membuat ruang menggunakan padding sesuai dengan keinginan kita,bisa membuat jarak konten di bawah ( padding bottom ),diatas ( padding top ),di kanan (padding right ) dan dikiri ( padding left ).

supaya kita dapat melihat jelas ukuran padding yang sedang kita gunakan,kita akan menggunakan border sebagai "alat bantu" unruk melihat tampilan padding.

satuan nilai yang dipakai untuk padding :

1.Panjang : px,pt,cm dll
2. %
3. inherit

pada contoh kali ini saya akan menggunakan satuan nilai px,coba perhatikan contoh berikut :

contoh penggunaan padding pada CSS

pada gambar diatas perhatikan sintaks :

padding :1px;

berarti kita membuat padding atas,kanan,bawah,kiri senilai 1px,jika dijalankan di google maka tampilannya akan seperti ini :

kita juga bisa membuat nilai padding atas,kanan,bawah,dan kiri berbeda dengan cara menulis satu per satu sintaksnya,tapi perlu di ingat yah urutannya adalah atas,kanan,bawah,kiri .

seperti ini sintaksnya :

padding-top :10px;

padding-right:50px;

padding-bottom:20px;

padding-left:30px;

padding

pada contoh gambar diatas,jika dijalankan di google maka tampilannya akan seperti ini :

Padding

sepertinya gambar diatas padding sedikit berubah tinggi dan lebar dari padding sebelumnya,kamu bisa mencobanya dengan nilai yang lebih besar,sehingga dapat melihat perubahan yang jelas.

kita bisa juga menyatukan sintaks padding,sehingga dapat menghemat kode baris pada CSS,lihat contoh di bawah ini :

padding :100px 100px 100px 100px;

padding :100px 100px 100px 100px;

Pada contoh diatas kita memberi padding atas 100px,kanan 100px,bawah 100px dan kiri 100px,jika dijalankan di google maka tampilannya akan seperti ini :

Tampilannya jelas sekali perubahan dari yang sebelumnya

jadi seperti itulah cara kerja padding,membuat jarak/ruang kosong konten dan border.

sampai disini dulu ya,Gbu ;)