Penjelasan Mengenai Padding dan Margin Serta Cara Memfungsikannya

Pada artikel sebelumnya saya sempat menyinggung padding dan margin pada pembahasan mengenai css. Sebenarnya apa sih fungsi padding dan margin itu? Lalu, dimana letak perdaan antara keduanya? Buat kamu yang binggung akan fungsi serta letak perdaan padding dan margin. Maka kamu wajib membaca artikel ini. Karena pada artikel ini akan dijelaskan hal tersebut.

Yang pertama, mari kita bahas dulu apa itu padding. Menurut definisi saya, padding itu merupakan suatu elemen yang dapat memberikan jarak atau menentukan jarak pembatas dengan elemen lain yang ada disekitarnya. Sebagai contoh: padding: 10px 5px 10px 5px; dengan kata lain padding tersebut telah memberikan jarak berderet pada bagian: atas, kanan, bawah dan kiri.

Padding juga memiliki property lainnya, yakni: padding-top, padding-right, padding-bottom, and padding-left. Namun untuk penggunaannya tidak seperti diatas (maksudnya tidak perlu memasukkan jarak sebanyak itu). Cukup memasukkan sebuah jarak perintah. Contoh: padding-bottom: 5px; 

Selanjutnya adalah margin. Margin merupakan suatu elemen yang dapat menentukan jarak pembatas dengan elemen lain yang ada disekitarnya setelah padding. Berarti margin juga berfungsi memberikan ruang batas seperti padding namun terletak pada lokasi yang berbeda.

Sebagai contoh: margin: 10px 5px 10px 5px; dengan urutannya adalah atas, kanan, bawah dan kiri (sama seperti padding). margin juga mempunyai property lainnya yang juga hampir menyerupai padding, yaitu: margin-top, margin-right, margin-bottom, and margin-left.

Pada padding dan margin terdapat value yang sering digunakan pada pengeditan, yaitu: px dan %. Bukan hanya itu saja value yang ada. Namun ke dua value tersebut merupakan hal yang paling sering akan kita gunakan. Dan menurut saya itu sudah lebih dari cukup.