;

Tutorial CSS - Belajar Padding-top,padding-right,padding-bottom,padding-left pada CSS

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 :


fungsi padding pada CSS
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;



Sintaks CSS padding
padding


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

belajar padding CSS
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;


CSS padding
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 :


Padding in CSS
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 ;)


Baca juga artikel tentang :

Margin pada CSS




List of Article Posts https://buayaberdiri.blogspot.com