Sekilas Tentang Padding, Margin dan Border

Dalam mengedit suatu template kita sering menemui kata Padding, Margin dan Border. Terutama bila kita sedang melakukan edit pada CSS. Nah kali ini BikinBerita akan mengulas sedikit mengenai apa itu Pading, Margin dan Border.

Pengertian Padding,Margin dan Border pada CSS

Untuk dapat memahami lebih jelas maka sebaiknya perhatikan gambar di bawah ini:

Dari skema gambar diatas kita dapat menyimpulkan beberapa keterangan mengenai padding, margin dan border seperti di bawah ini.

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

Cara Penggunaan Padding,Margin dan Border

Padding
ditulis dengan CSS padding:5px 5px 5px 5px; sedangkan untuk urutan nilai angkanya adalah atas, kanan, bawah dan kiri, atau kamu 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; sedangkan untuk 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 (www.colorschemer.com/online)

Margin
Ditulis dengan CSS margin:5px 5px 5px 5px; sedangkan untuk urutan penggunaannya adalah atas, kanan, bawah dan kiri, atau bisa menngunakan seperti padding diatas
margin-left:5px;
margin-right:5px;
margin-top:5px;
margin-bottom:5px;

Semoga informasi mengenai apa itu padding, margin dan border dan juga bagaimana cara penggunaannya bisa menambah pengetahuan.
(source:http://www.seby-antoe.com/2009/07/pengertian-paddingmargin-dan-border.html)