Panduan kali ini tentang perbedaan margin dan padding di bahasa CSS.
Dulu waktu awal-awal aku mulai ngoding website, aku sering salah saat menggunakan margin dan padding. Kadang malah tertukar.
Yang harusnya pakai margin, aku malah pakai padding dan sebaliknya.
Maka dari itu, biar kamu nggak kayak aku (yang dulu), baca panduan ini sampai selesai.
Biar gampang dalam membedakan padding dan margin, silahkan lihat gambar berikut:
Gambar diatas adalah urutan dalam CSS.
Kotak margin(hijau) adalah bagian terluar. dan kotak padding ada dibagian ketiga dari luar (biru gelap).
Penjelasan lengkapnya sudah ada di gambar.
Gimana? sudah mengerti susunannya? kalau sudah,kita lanjut ke perbedaannya.
Perbedaan yang paling mencolok antara margin dan padding adalah fungsi margin adalah memberi jarak antara 1 elemen dengan elemen yang lainnya. (elemen = div atau sejenisnya).
Sedang fungsi padding adalah memberikan jarak antara elemen dengan bordernya didalam sebuah divisi / div.
Agar kamu semakin mengerti, mari kita mencoba menggunakan padding dan margin.
Margin
Ini kode penggunaan margin di CSS :
#sebuahid{margin-top:5px;margin-right:10px;margin-bottom:auto;margin-left:10px} /* Kodingan lengkap */ada shorthand dalam penulisan margin agar menjadi lebih simple dan lebih cepat saat diketik.
#sebuahid{margin:5px 10px auto auto;} /* Shorthand */Urutan pengetikannya sesuai dengan arah jarum jam (atas-kanan-bawah-kiri).
Kenapa hanya ada 3 value di kodingan shorthand? karena aku menggunakan ukuran yang sama pada margin-right dan margin-left, sehingga aku tidak perlu menulis ulang angka yang sama.
Kodingan ini hanya berlaku dengan syarat :
- Margin yang ingin disamakan harus sesuai dengan lawannya (atas dengan bawah, kiri dengan kanan dan sebaliknya).
- Besar jaraknya harus sama (ex: margin-left:10px, maka margin-right otomatis akan menjadi 10px juga).
Lalu, apa gunanya auto?
Auto berfungsi sebagai deklarasi bahwa besaran jaraknya diatur otomatis oleh sistem browser.
Fungsi lainnya adalah untuk membuat sebuah elemen menjadi ditengah. Tapi, aku enggak akan bahas tentang itu di panduan ini.
Oh iya, sebenernya kodingan margin ditas akan tetap jalan tanpa harus diketik auto, coba saja jika tidak percaya.
Selanjutnya, pembahasan tentang Padding.
Padding
Penulisan koding padding pada CSS tidak terlalu berbeda dengan penulisan margin.
#sebuahid{padding-top:5px;padding-right:10px;padding-bottom:5px;padding-left:10px} /* Kodingan lengkap */Untuk shorthand-nya :
.sebuahclass{padding:5px 10px;} /* Shorthand */
.sebuahclass{padding:5px 10px 15px;} /* Shorthand juga */Kalau kamu merhatiin baik-baik, aku enggak nulis auto di bagian shorthand padding. Tau kenapa?
Jawabannya adalah karena tidak ada kata auto didalam padding. Iya, gaada.
Jadi, kamu ga perlu ngetik auto dibagian padding karena nanti bakal bikin CSS kamu error.
