Jumat, Juli 23, 2021
BerandaTutorial Belajar CSSPengertian Padding dan Fungsi Padding dalam CSS - Tutorial CSS

Pengertian Padding dan Fungsi Padding dalam CSS – Tutorial CSS

Padding adalah jarak anda konten dengan garis pinggirnya (border).
Properti padding akan memberikan spasi antara konten dengan garis, jika tanpa padding konten akan terlalu rapat ke tepi garis.
Untuk lebih jelas perhatikan gambar dibawah ini.

membuat padding css
membuat padding css

Dari gambar diatas bisa kita lihat bahwa padding berada tepat diluar konten.
Semakin besar nilai padding maka semakin jauh jarak konten dengan border.

Pentuan nilai dan satuan nilai padding

Padding pada css bisa kita tentukan nilainya secara masing-masing sisi ataupun secara keseluruh.
Penentuan nilai padding sama seperti penentuan nilai properti margin css.
Satuan nilai padding bisa memakai px, pt, cm dll Bisa juga memakai persen dan inherit.

Contoh padding css

Dalam contoh diatas saya membuat nilai padding
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
Bisa kita lihat bahwa padding ini berfungsi untuk membuat jarak text/konten ke baris, semakin besar nilainya maka semakin jauh text dari border.

Padding – Shorthand Properti

Sama seperti properti margin yang memiliki shorthand, padding juga memiliki properti shorthand.
Seperti yang kita ketahui bahwa shorthand digunakan untuk mempersingkat penulisan kode css.
Berikut ini adalah contoh padding shorthand

Dengan properti shorthand ini kita tidak perlu membuat properti top, bottom, right dan left.
Kita hanya perlu membuat satu properti untuk menentukan nilai setiap sisi.
Perhatikan penentuan nilai properti shorthand berikut ini
padding: 25px 50px 75px 100px;
Artinya:
padding atas adalah 25px
padding kanan adalah 50px
padding bawah adalah 75px
padding kiri adalah 100px
Jika kita menentukan nilainya hanya untuk 3 sisi saja contohnya sebagai berikut
padding: 25px 50px 75px;
Artinya:
padding atas adalah 25px
padding kanan dan kiri 50px
padding bawah adalah 75px
Jika kita hanya menentukan 2 sisi saja seperti berikut ini
padding: 25px 50px;
Artinya
padding Atas dan bawah 25px
padding kanan dan kiri 50px
Dan yang terakhir
padding: 25px;
Artinya semua sisi baik atas, kanan, bawah, kiri akan memiliki jarak 25px.

Contoh padding tanpa border

Padding kiri

Padding kanan

Padding Atas

Padding bawah

Dengan semua 7 contoh padding diatas saya yakin anda sudah dapat memahami apa itu padding dan juga sudah mengetahui fungsi padding itu.
Sekian tutorial padding css ini semoga bermanfaat. baca juga tutorial membuat margin dengan csskegunaan padding pada css

Video Terbaru

RELATED ARTICLES

Apa yang anda pikirkan?

Most Popular