Padding adalah jarak atau space widget yang mengarah ke widget bagian dalam, kode padding yang digunakan pada widget bagian luar.Sedangkan margin adalah kode yang berfungsi untuk membuat jarak ke bagian luar widget kode margin di pasang di bagian dalam widget. Untuk lebih jelasnya tentang padding dan margin perhatikan gambar berikut.
Contoh gambar diatas misalnya seperti berikut:
Garis border warna merah adalah kode widget, dan warna biru kode widget.content.
Untuk membuat jarak widget seperti gambar diatas dengan menggunakan fungsi padding adalah kode padding di simpan pada kode widget.content, sedangkan untuk menggunakan fugsi margin kode margin di simpan pada kode widget.
Dari contoh diatas kiranya cukup jelas untuk mengenal padding dan margin, selanjutnya adalah mengenal satuan padding dan margin, untuk satuan padding dan margin bisa dengan menggunakan dua cara diantararnya Statik dan Relatif. Tutorialnya seperti di bawah ini
1. Statik
* in -- satuan inchi2. Relatif
* cm -- satuan centimeter
* mm -- satuan milimeter
* pt -- satuan point (1point = 1/72 inchi)
* pc -- satuan pica (1pica = 12 point)
* px -- satuan pixel (satu titik gambar terkecil dalam layar monitor)
* auto-- tersesuaikan secara otomatis
* % -- satuan persenPada postingan ini akan mencoba menjelaskan dengan menggunakan "px"
* em -- atau ems (1em = ukuran font yang tengah ada dalam elemen)
* ex -- 1ex = x-height suatu font (x-height biasanya setengah ukuran font)
Contoh Padding:
Contoh 1={padding:10px 5px 8px 6px ;}
Urutan angka dalam satuan "px" pada padding diatas memiliki arti "atas - kana - bawah - kiri"
Contoh 2=Bila diuraikan menjadi seperti:
{padding-top: 10px ; /* jarak dengan garis pinggir atas */Contoh 3= {padding:10px 5px } artinya:
padding-right: 5px; /* jarak dengan pinggir kanan */
padding-bottom: 8px ; /* jarak dengan pinggir bawah */
padding-left: 6px; /* jarak dengan pinggir kiri */}
{padding-top,padding-bottom:10pxContoh 4= {padding:10px auto } artinya: sama dengan contoh 3
padding-right,padding-left:5px}
Contoh 5= {padding:10 auto 10 } artinya: sama dengan contoh 3
{padding-top: 10px ;Inti kode kode di atas dasarnya sama
padding-right: auto;
padding-bottom: 10px ;
padding-left: auto; }
Sedangkan untuk Contoh margin caranya sama seperti contoh contoh padding, hanya mengganti padding dengan margin.
Selamat mencoba!!!