Perbedaan Margin dan Padding di Blogger Templates
Kali ini saya akan menjelaskan perbedaan Margin dan Padding di Template Blogger. Mengapa harus dijelaskan? Pasalnya, kita (dan saya) seringkali salah saat menggunakan Margin dan Padding.
Yang seharusnya bagian itu menggunakan Margin, tapi kita malah pakai Padding; - dan sebaliknya.
Oleh karena itu, biar gak bingung lagi, baca panduan ini sampai selesai. Tujuannya agar bisa membedakan mana Margin dan Padding.
Pastikan kalian melihat gambar di bawah ini:
Gambar di atas merupakan gambar rujukan mengenai urutan dalam CSS.
Margin adalah bagian terluar, sedangkan Padding berada di bagian ketiga. Padding diapit oleh Border dan Content. Benar, kan?
Sebenarnya, mudah untuk membedakan mana Margin dan mana Padding.
Perbedaan yang paling kentara adalah fungsi Margin yaitu memberi jarak antara satu Element dengan Element lainnya pada tag div dan sejenisnya, sedangkan fungsi Padding adalah memberikan jarak antara Element satu dengan Border-nya di dalam sebuah tag div / divisi.
Contoh penggunaan Margin di CSS:
Di atas adalah kode CSS secara lengkap. Sebenarnya kita bisa menyingkatnya dengan cara berikut, istilah ini dikenal dengan sebutan Shorthand.
Ingat, urutannya sama seperti arah jarum jam.
(Atas - kanan - bawah - kiri).
Perhatikan lagi kode margin: 5px 10px auto auto ini, hanya ada 3 value di sana. Mengapa? Sebab margin-right dan margin-left memiliki ukuran yang sama. Intinya, kita gak perlu menggunakan angka ya sama.
Penggunaan koding jenis Shorthand hanya berlaku apabila:
Selanjutnya, apa fungsi dari Auto?
Auto berfungsi sebagai deklarasi bahwa besaran jaraknya akan diatur secara otomatis oleh sistem Browser. Selain itu, Auto juga membuat sebuah Element menjadi di tengah.
Contoh penggunaan Margin di CSS:
Kalau ingin menerapkan cara Shorthand, seperti ini:
Perhatikan kode di atas, gak ada teks Auto, kan? Itu karena Padding tidak mengenal nilai Auto. Kalau memaksa untuk dipasangkan, bisa-bisa CSS kalian bakal Error.
Memang mau Template Blogger-nya menjadi Error?
Sumber: https://moccatory.blogspot.com/2019/03/panduan-membedakan-margin-dan-padding.html
Yang seharusnya bagian itu menggunakan Margin, tapi kita malah pakai Padding; - dan sebaliknya.
Oleh karena itu, biar gak bingung lagi, baca panduan ini sampai selesai. Tujuannya agar bisa membedakan mana Margin dan Padding.
Perbedaan Margin dan Padding di Blogger Templates
Pastikan kalian melihat gambar di bawah ini:
 |
| AvaJava.com |
Gambar di atas merupakan gambar rujukan mengenai urutan dalam CSS.
Margin adalah bagian terluar, sedangkan Padding berada di bagian ketiga. Padding diapit oleh Border dan Content. Benar, kan?
Sebenarnya, mudah untuk membedakan mana Margin dan mana Padding.
Perbedaan yang paling kentara adalah fungsi Margin yaitu memberi jarak antara satu Element dengan Element lainnya pada tag div dan sejenisnya, sedangkan fungsi Padding adalah memberikan jarak antara Element satu dengan Border-nya di dalam sebuah tag div / divisi.
Cara Menggunakan Margin yang Benar
Contoh penggunaan Margin di CSS:
#kodebloggerid {
margin-top: 5px;
margin-right: 10px;
margin-bottom: auto;
margin-left: 10px
}Di atas adalah kode CSS secara lengkap. Sebenarnya kita bisa menyingkatnya dengan cara berikut, istilah ini dikenal dengan sebutan Shorthand.
#kodebloggerid {
margin: 5px 10px auto auto
}Ingat, urutannya sama seperti arah jarum jam.
(Atas - kanan - bawah - kiri).
Perhatikan lagi kode margin: 5px 10px auto auto ini, hanya ada 3 value di sana. Mengapa? Sebab margin-right dan margin-left memiliki ukuran yang sama. Intinya, kita gak perlu menggunakan angka ya sama.
Penggunaan koding jenis Shorthand hanya berlaku apabila:
- Margin memiliki ukuran yang sama dengan lawannya, atas - bawah dan kiri - kanan.
- Jaraknya harus sama (mis: margin-right: 20px, maka margin-left otomatis akan menjadi 20px juga).
Selanjutnya, apa fungsi dari Auto?
Auto berfungsi sebagai deklarasi bahwa besaran jaraknya akan diatur secara otomatis oleh sistem Browser. Selain itu, Auto juga membuat sebuah Element menjadi di tengah.
Cara Menggunakan Padding yang Benar
Contoh penggunaan Margin di CSS:
#kodebloggerid {
padding-top: 5px;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 10px
}Kalau ingin menerapkan cara Shorthand, seperti ini:
#kodebloggerid {
padding: 5px 10px
} /* Shorthand */
#kodebloggerid {
padding: 5px 10px 5px
} /* Shorthand Juga */Perhatikan kode di atas, gak ada teks Auto, kan? Itu karena Padding tidak mengenal nilai Auto. Kalau memaksa untuk dipasangkan, bisa-bisa CSS kalian bakal Error.
Memang mau Template Blogger-nya menjadi Error?
Sumber: https://moccatory.blogspot.com/2019/03/panduan-membedakan-margin-dan-padding.html
