(Edan) Pengertian Padding,Margin dan Border pada CSS

Bagi rekan blogger yang suka otak-atik template blognya (tidak hanya di template blog seeh), pasti sering kali melihat kata-kata dan istilah Padding, Margin Dan Border pada CSS yang digunakan sebagai pengukuran dasar pada CSS.. Nah pada pertemuan ini saya akan memberikan sedikit pengertian dari ketiga Hal tersebut dan juga gunanya..

Contoh Tampilan Style Border :

Edan Pool

Selasa

KISAH EDAN POOL DN MALAIKAT MALIK

---------------------------------------------

Edan Pool = knp kamu senyam senyum pada q kat malaikat malik,,,!!!!

MALAIKAT MALIK (penjaga neraka) = loh knp mas Edan brani marah pd ku ,,???

Edan Pool = mang apa yg ku takuti dr kamu lik malik,,, !!!!

MALAIKAT MALIK = udah lh mas Edan aku dh abis ksabaran ku,,, WOng pean orang gk baik og gk mau di masukin k neraka malah aku pean marahi ,,,,,sini aku lempar kan pean k NERAKA !!!!!

=============

karna SAKING marah nya maka edan Pool pn d lempar kn k neraka dg keras dn sekuat tenaga olh si malik,,,

Dn SAKING keras nya lemparan malaikat ,,,MAKA EDAN POOL PN JABLAS MLWATI NERAKA dn AHIR NYA EDAN POOL PN DDUK D SURGA,,,,,

dashed cak kis

solid cak kis

double cak kis

groove cak kis

ridge cak kis

inset cak kis

outset cak kis

Padding, Margin dan Border, sebelum saya menerangkan lebih jauh silahkan lihat skema gambar dibawah ini dulu :

Nah dari keterangan diatas kita dapat menyimpulkan seperti dibawah

Padding :   Menentukan jarak komponen body ke border atau Ukuran jarak bagian dalam
Border   :   Adalah garis tepi dari komponen
Margin   :   Adalah Ukuran jarak bagian luar atau ukuran jarak sesudah Border

Cara Penggunaan

Padding
ditulis dengan CSS padding:5px 5px 5px 5px; urutan nilai angkanya adalah atas, kanan, bawah dan kiri, atau Anda bisa menggunakan
padding-left:5px; ini adalah untuk pengaturan padding bagian kiri
padding-right:5px; ini adalah untuk pengaturan padding kanan
padding-top:5px; untuk bagian atas dan
padding-bottom:5px; untuk bagian bawah, Ingat satuan px(pixels) bisa kamu ganti sesuai satuan yang lain yang sesuai

Border
Ditulis dengan CSS border:1px dotted #000000; urutan penggunaanya adalah ukran border, style border dan warna border, atau bisa menggunakan
border-width:1px; ini adalah ketebalan border
border-style:dotted; ini adalah jenis bordernya bisa kamu ganti dengan dashed, solid, double, groove, ridge, inset, outset dan lainya
border-color:#FFFFFF; ini adalah warna dari border.. kamu bisa menggantin code warnanya (www.colorschemer.com/online)

Margin
Ditulis dengan CSS margin:5px 5px 5px 5px; urutanya atas, kanan, bawah dan kiri, atau bisa menngunakan seperti padding diatas
margin-left:5px;
margin-right:5px;
margin-top:5px;
margin-bottom:5px;
keterangan lainya bisa mengikuti keterangan padding diatas

Satuan Dalam 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)

Sekian semoga bermanfaat

Sumber tips