Pengertian dan Fungsi Padding pada CSS

Pada tutorial ini kita akan mengupas tuntas tentang pengertian dan fungsi padding pada CSS. Padding sendiri merupakan jarak / ruang kosong transparan yang berada di antara elemen dengan border bagian dalam. Padding ini berbeda dengan margin, bila margin adalah jarak yang berada di antara elemen dengan border bagian luar. Penggambaran padding seperti contoh gambar di bawah ini :

apa itu padding pada css

Dari gambar di atas dapat kita anggap jika tulisan elemen adalah contoh elemen2 HTML seperti <p>, <h1>, dan sebagainya, lalu garis berwarna biru adalah bordernya, nah space yang berada di antara elemen dengan border bagian dalam inilah yang dinamakan padding.

CSS menyediakan konsep shorthand (cara tercepat dalam menggunakan property) pula pada Padding, tentunya dengan property padding

Nilai dari padding ini bermula dari atas, kanan, bawah, kiri. Contoh :

padding: 5px 3px 4px 2px;

Menandakan :

  1. Atas = 5px.
  2. Kanan = 3px.
  3. Bawah = 4px.
  4. Kiri = 2px.

Apabila kalian mendeklarasikannya dalam 1 nilai property, maka akan berpengaruh global, yakni pada masing – masing sisi padding…

padding: 5px;

Menandakan atas, kanan, bawah, kiri sama dengan 5px.

Lalu jika kalian mengisikan…

padding: 5px 2px;

Itu berarti, memberi nilai pada posisi…

  1. Atas, bawah = 5px.
  2. Kanan – kiri = 2px.

Satuan ukuran yang dapat kalian berikan dapat berupa px (pixel) , pt (point), cm (centimeter), atau % (persen).

Di bawah ini, saya berikan contoh padding…

Perhatikan kode sumber di bawah ini :

Berikut hasil dari kode sumber di atas :

apa itu padding

Kesimpulan tentang Padding

Padding, Margin, dan Border adalah property yang biasa digunakan untuk mengatur tata letak elemen pada website. Padding, Margin dan Border sendiri termasuk dalam kategori box model pada CSS. Sebenarnya untuk mengatur tata letak elemen sendiri juga ada property lainnya, yakni property position dengan nilai – nilai property nya seperti static, relative, absolute dan fixed. Kemudian pemakaian property position sendiri dikombinasikan dengan property lainnya yakni top, right, bottom, dan left untuk mengatur nilai satuannya.


Demikian tutorial dari fungsi padding pada CSS. Silahkan kunjungi tutorial CSS lainnya seperti fungsi margin pada css, positioning elemen HTML, apa yang dimaksud combinators pada CSS.

× Contact Us