Fungsi dan Satuan Padding, Margin Css

Tutorial berikut ini adalah tutorial buat menjelaskan tentang fungsi dasar kode padding dan margin. Kode padding dan margin adalah kode css yang berfungsi untuk membuat perintah jarak atau space kode html  Fungsi padding dan margin tepatnya untuk widget dan gadget content antara border widget satu dan border widget lainnya. kedua kode diatas untuk membuat jarak widget di template blogger caranya bisa dengan menggunakan padding atau menggunakan margin.

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 inchi
* 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

2. Relatif

* % -- satuan persen
* em -- atau ems (1em = ukuran font yang tengah ada dalam elemen)
* ex -- 1ex = x-height suatu font (x-height biasanya setengah ukuran font)

Pada postingan ini akan mencoba menjelaskan dengan menggunakan "px"

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 */

padding-right: 5px; /* jarak dengan pinggir kanan */

padding-bottom: 8px ; /* jarak dengan pinggir bawah */

padding-left: 6px; /* jarak dengan pinggir kiri */}

Contoh 3= {padding:10px 5px } artinya:

{padding-top,padding-bottom:10px

padding-right,padding-left:5px}

Contoh 4= {padding:10px auto } artinya: sama dengan contoh 3

Contoh 5= {padding:10 auto 10 } artinya: sama dengan contoh 3

{padding-top: 10px ;

padding-right: auto;

padding-bottom: 10px ;

padding-left: auto; }

Inti kode kode di atas dasarnya sama

Sedangkan untuk Contoh margin caranya sama seperti contoh contoh padding, hanya mengganti padding dengan margin.

Selamat mencoba!!!