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 tentang CSS 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.

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.

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 kamu dapat lebih memahami margin dan padding dalam mengedit css di blog kamu.
0 Komentar untuk "CSS Margin dan Padding"