Apa itu Margin, Border, dan Padding?

Untuk rekan bloger pemula seperti saya hampir sebagian besar waktu hanya digunakan untuk mengatur tampilan  Blog. Nah, ketika mengutak-atik tampilan blog itu, sering kita jumpai istilah seperti margin, border, dan padding. Sebagai pemula tentunya kita akan dibuat bingung. Untuk memahami tentang margin, border, dan padding, Langsung saja ke TKP.

Berdasarkan gambar diatas dapat disimpulkan bahwa:

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
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 ukuran 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 disini.

Margin
Ditulis dengan CSS margin:5px 5px 5px 5px; urutanya atas, kanan, bawah dan kiri, atau bisa menngunakan seperti padding diatas
margin-left:5px; dikiri.
margin-right:5px; dikanan.
margin-top:5px; diatas.
margin-bottom:5px; dibawah.

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)

Contoh Tampilan Style Border :

dotted

dashed

solid

double

groove

ridge

inset

outset

Semoga bermanfaat.


[ref: www.seby-antoe.com]