MARGIN BORDER dan PADDING dalam CSS

Postingan ini bertujuan untuk mengingatkan saya khususnya dalam memperdalam pengetahuan tentang blog.Apabila ada pembaca yang merasa tulisan ini berguna,mari belajar bersama
Bagi pemula yang gemar mengotak-atik code CSS untuk mempercantik template.gambar disamping merupakan sekema dasar penulisan Margin Border dan Padding .
Tiga komponen dalam css ini sangat berguna untuk mengubah tampilan template.
Untuk keterangan gambar adalah sbb :

• Margin : merupakan ukuran jarak bagian luar atau ukuran jarak sesudah Border
• Border : merupakan garis tepi dari komponen
• Padding : menentukan jarak komponen body content ke border atau ukuran jarak bagian dalam

Penulisan dan Penggunaan pada Kode CSS

Padding
padding : 2px 2px2px2 px; 
Urutan nilai angka adalah : atas, kanan, bawah dan kiri.
Atau anda bisa menuliskannya seperti ini :
padding-left:2px;        : untuk pengaturan padding bagian kiri
padding-right:2px;      : untuk pengaturan padding kanan
padding-top:2px;        : untuk pengaturan padding atas
padding-bottom:2px;  : untuk pengaturan padding bawah
Ket : px (pixel ) adalah satuan ketebalangaris

Border
border:2px dotted #000000; 
Artinya ukuran tebal border, style border dan warna border.
Atau anda bisa menuliskannya seperti ini :
border-width:1px;    adalah nilai tebal border
border-style:dotted; adalah jenis border dan bisa anda ganti dengan dashed, solid, double, groove, ridge, inset, outset dan lainya.
Dapat juga ditulis sbb :
border-color:#FFFFFF; adalah warna border dan anda bisa mengganti warnanya dengan kode warna saya.
Ket :
width          : Tebal garis

# 000000   : Kode warna
dotted        : Jenis Garis
Berikut contoh model garis :

Dotted

Dashed

Solid

Double

Groove

Ridge

Inset

Outset

Margin
margin:2px 2px 2px 2px; 
Urutan nilai angka untuk atas, kanan, bawah dan kiri.
Atau anda bisa menuliskannya seperti ini :
margin-left:2px;        : untuk pengaturan margin bagian kiri
margin-right:2px;      : untuk pengaturan margin bagian kanan
margin-top:2px;        : untuk pengaturan margin bagian atas
margin-bottom:2px;  : untuk pengaturan margin bagian bawah

Satuan Dalam CSS
Tadi sudah disinggung sedikit bahwa satuan kode CSS tersebut dapat disesuaikan dengan satuan lain. Nah, berikut satuan yang digunakan dalam kode CSS.

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)

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)

Nah silahkan kreasikan dengan ide yang anda miliki..
Sampai ketemu lagi...