Apa itu Margin dan Padding dan bagaimana menerapkannya di Blog

HaiSobat apa kabar? semoga semuanya dalam keadaan baik, Ok sobat, pada kesempatan ini saya akan menjelaskan tentang margin dan padding dan cara penerapannya di Blog.

Tentu saja bagi kamu yang sudah berpengalan dengan kode css, sudah biasa otak-atik template pastilah sudah tidak asing dengan margin dan padding ini, tapi mungkin saja sahabat-sahabat lain masih bingung dengan margin dan padding ini. nah berikut saya akan coba jelaskan dengan singkat apa itu margin dan padding.

MARGIN


MARGIN
Margin

Margin (dalam pengertian CSS) adalah ruang disekitar elemen/konten. Margin akan membentuk daerah (ruang) vertikal dan horizontal antara elemen. Jika elemen/konten tidak memilki margin, maka elemen-elemen tersebut akan rapat bertemu terhadap satu sama lain.

Baca juga: Belajar CSS Position, property dan Value

Contoh:
#element { margin: 10px;} 
Ini berarti elemen memilki margin yang sama "10px" untuk setiap sisi elemen
#element { margin: 10px 20px; } 
Ini berarti elemen memiliki: -margin-top, margin-bottom:"10px" dan -margin-left, margin-right:"20px"
#element { margin: 10px 20px 5px 15px; } 
Elemen ini memiliki -margin-top:10px, margin-right:20px,  margin-bottom:5px, margin-left:15px
Atau bisa dengan versi panjangnya:
#element { margin-top:10px; margin-right:5px; margin-bottom:5px; margin-left:10px;} 
Agar margin bekerja dengan baik, elemen biasanya diikuti oleh posisi float atau diposisikan relative.

PADDING


PADDING
Padding

Pengertian dari properti padding sama dengan  margin, cuma kalau padding bersifat inside space dari suatu elemen yang diatur disekitar area konten. Padding adalah ruang horizontal dan vertikal yang diatur di sekitar area isi/konten dari elemen yang ditargetkan. Jadi padding di bagian dalam kotak, bukan di luar. Padding tidak mempengaruhi jarak dari elemen ke elemen lainnya tetapi hanya mendefinisikan jarak inner antara tepi dan isi dari elemen.

Baca juga: Belajar Tag Kondisional Blogger

Contoh:
#element { margin: 10px;} 
Ini berarti elemen memilki Padding yang sama "10px" untuk setiap sisi elemen
#element { margin: 10px 20px; } 
Ini berarti elemen memiliki: -Padding-top, Padding-bottom:"10px" dan -Padding-left, Padding-right:"20px"
#element { margin: 10px 20px 5px 15px; } 
Elemen ini memiliki -Padding-top:10px, Padding-right:20px,  Padding-bottom:5px, Padding-left:15px
Atau bisa dengan versi panjangnya:
#element {Padding-top:10px; Padding-right:5px; Padding-bottom:5px; Padding-left:10px;} 
Nah semoga saja dengan informasi ini kamu dapat lebih memahami margin dan padding dalam mengedit css blog kamu.