Margin dan Padding Pada CSS

Kali ini saya akan membahas CSS untuk margin dan padding.
Margin adalah jarak luar CSS yang kita buat sedangkan padding adalah jarak dalam CSS yang kita buat.
Untuk lebih jelasnya bisa lihat simulasi dibawah.

Sudah paham tentang Margin dan Padding kan?
sekarang kita lanjut kedalam penulisan dan Value dari margin dan padding pada CSS.

Dalam contoh kali ini saya akan membuat CSS tombol

<style type="text/css">
.tombol {
background:#1abc9c;
width:150px;
height:auto;
border:2px #16a085 solid;
padding:7px;
margin:5px;
text-align:center; 
float:left;
} 
</style>

Pada simulasi diatas saya menuliskan jarak dalam ( Padding ) adalah 7px dan jarak luar ( Margin ) adalah 5px. Maka akan menghasilkan Tombol seperti ini :

Contoh

Contoh 1

Penempatan Margin pada gambar diatas adalah Jarak antara Contoh dan Contoh 1 dan
Penempatan Padding pada gambar diatas adalah jarak antar Tulisan dan border.

Penempatan margin dan padding juga bisa pada 1 sisi saja, Property-nya :

margin-top:value;

margin-right:value;

margin-bottom:value;

margin-left:value; 

padding-top:value;

padding-right:value;

padding-bottom:value;

padding-left:value; 

Penempatan margin dan padding juga bisa berbeda setiap sisinya, Property-nya :

margin:5px 3px 5px 3px;

padding:5px 3px 5px 3px; 

Dengan ketentuan posisi : atas, kanan, bawah, kiri

Sudah paham bukan? Kalau belum paham silahkan ditanyakan.
Wassalamu'alaikum WR.WB.