CSS Margin dan Padding

Senin, 22 Agustus 2011

Secara sederhana, margin dapat didefinisikan sebagai kerenggangan antara area dengan daerah luar, sedangkan padding adalah kerenggangan antara area dengan objek di dalamnya.

Deklarasi margin dan padding dapat dituliskan seperti ini:

margin:5px;
padding:5px;

5px adalah contoh value dari properti margin dan padding. Selain ukuran kerenggangan dalam piksel, ukuran margin dan padding juga dapat ditentukan dengan satuan em, pt ataupun %, meskipun sebenarnya ada juga satuan pengukuran yang lainnya. Kamu bahkan bisa menuliskan ukuran kerenggangan negatif seperti -5px, -100px, dll.

Margin dan padding dapat dipecah menjadi empat bagian seperti ini:

Deklarasi	Keterangan
margin-top:5px;	Menentukan margin sebelah atas sebesar 5 piksel
margin-right:5px;	Menentukan margin sebelah kanan sebesar 5 piksel
margin-bottom:5px;	Menentukan margin sebelah bawah sebesar 5 piksel
margin-left:5px;	Menentukan margin sebelah kiri sebesar 5 piksel
padding-top:5px;	Menentukan padding sebelah atas sebesar 5 piksel
padding-right:5px;	Menentukan padding sebelah kanan sebesar 5 piksel
padding-bottom:5px;	Menentukan padding sebelah bawah sebesar 5 piksel
padding-left:5px;	Menentukan padding sebelah kiri sebesar 5 piksel

Atau kamu juga bisa menggunakan cara yang lebih praktis, yaitu dengan menggabungkan keempat pengukuran kerenggangan yang berbeda dalam satu properti margin/padding saja seperti ini:

Deklarasi	Keterangan
margin:1px 2px 3px 4px;	Margin atas: 1 piksel Margin kanan: 2 piksel Margin bawah: 3 piksel Margin kiri: 4 piksel
margin:1px 2px 3px;	Margin atas: 1 piksel Margin kanan dan kiri: 2 piksel Margin bawah: 3 piksel
margin:2px 4px;	Margin vertikal (atas dan bawah): 2 piksel Margin horizontal (kanan dan kiri): 4 piksel
padding:1px 2px 3px 4px;	Padding atas: 1 piksel Padding kanan: 2 piksel Padding bawah: 3 piksel Padding kiri: 4 piksel
padding:1px 2px 3px;	Padding atas: 1 piksel Padding kanan dan kiri: 2 piksel Padding bawah: 3 piksel
padding:2px 4px;	Padding vertikal (atas dan bawah): 2 piksel Padding horizontal (kanan dan kiri): 4 piksel