Senin, 6 Desember 2021

pengertian dan fungsi padding pada CSS

Pada tutorial sebelumnya saya telah membahas tentang pengertian dan fungsi margin pasa CSS. Pada kesempatan kali ini saya akan membahas tentang pengertian dan fungsi padding pada CSS.


Pengertian padding pada CSS

Padding adalah sebutan untuk spasi atau ruang diantara konten dan border. Untuk lebih jelasnya silahkan lihat gambar dibawah ini :

pengertian dan fungsi padding pada CSS
Dari gambar diatas kita bisa melihat padding berada diantara content dan border. Kenapa saya kasih border, karena untuk melihat efek padding, jika tidak di kasih border maka efek padding susah telihat.

Cara Penulisan Padding Pada CSS

Padding bisa di tulis dengan satuan panjang seperti pixel,  em, persen dan lain-lain. Untuk lebih jelasnya lihat contoh dibawah ini :

pengertian dan fungsi padding pada CSS
Jika tidak terjadi kesalahan, maka hasilnya seperti gambar dibawah ini :pengertian dan fungsi padding pada css
Dari gambar diatas kita bisa melihat ada padding di paragraf pertama, saya menggunakan padding: 15px, efeknya teks akan berjarak 15px dari setiap sisi border. Sedangkan pada paragraf kedua tidak menggunakan padding dan dapat terlihat seolah-olah tulisan menempel ke sisi border.

Sama seperti margin, padding juga memiliki sisi-sisi seperti top, right, bottom, dan left. Sebagai contoh, ketika kita menulis padding: 15px, maka padding ini sebenarnya sama dengan:
pengertian dan fungsi padding pada css
Jika kita menulis padding: 30px 15px, maka ini sama dengan:
pengertian dan fungsi padding pada css
Dari kode CSS diatas kita bisa melihat bahwa nilai pertama (30px) digunakan untuk sisi atas dan bawah, sedangkan nilai kedua (15px) digunakan untuk sisi kanan dan kiri.

Demikianlah tutorial tentang pengertian dan fungsi padding pada CSS. Silahkan bagikan atau share artikel ini jika dirasa ada yang membutuhkan.

  • Share Post:
related posts
about author

Seseorang yang suka belajar sesuatu yang baru, terutama tentang pemrograman web. Senang berbagi tentang pengetahuan dan belajar dari yang lain.

recent posts
categories
trending posts
SERBA KOMPUTER © 2017 - 2019, ALL RIGHTS RESERVED.