Mengenal Property Padding Dan Margin
Oleh
Padding dan margin adalah property untuk membuat batas ruang dalam dan ruang luar dari sebuah elemen objek, Maksud dari objek disini bisa berupa gambar, teks, ataupun apa saja, yang akan kelihatan jelas bila diberi warna pembatas (border) ataupun background .
Padding adalah ruang yang ada dibagian dalam dari sebuah elemen, sedangkan
Margin adalah ruang yang berada di bagian luar dari elemen itu.
Sebagai contoh perhatikan ilustrasi berikut :
Penambahan nilai atau value pada property padding otmatis akan menambah baik lebar maupun tinggi suatu elemen, sedangkan penambahan nilai pada property margin tidak akan menambah lebar maupun tinggi suatu elemen .
Untuk lebih jelasnya dan melihat perubahan jika property padding di rubah nilainya bisa melihatnya disini , sedangkan untuk melihat perubahan pada property margin bisa melihatnya disini .
Penulisan untuk property padding dan property margin sendiri bisa secara satu satu atau individual maupun disingkat atau istilahnya Shorthand Property . Nilai atau value dari property padding memungkinkan di tulis dalam : pixel , pt , em , dan % .
Sedangkan nilai atau value untuk property margin, memungkinkan ditulis dalam : auto , pt , em , etc dan % .
padding-top: 50px
padding-right: 30px
padding-bottom: 50px
padding-left: 30px
Penulisan property dan value diatas bisa disingkat atau diperpendek (shorthand) menjadi :
" padding : 50px 30px 50px 30px " , pembacaan nilai nya sendiri searah jarum jam . Di baca mulai dari arah kiri ke kanan adalah Atas, Kanan, Bawah dan Kiri . Jika nilai dari property padding itu sendiri semuanya mempunyai nilai yang sama bisa lebih di perpendek lagi dengan cukup menuliskan seperti ini .
" padding : 50px " : artinya keempat sisinya baik atas, kanan, bawah, maupun kiri mempunyai nilai panjang maupun lebar sama sebesar 50px .
Kemudian satu lagi , bila property padding dua sisi yang berlawanan mempunyai nilai yang sama , penulisannya bisa begini :
" padding : 50px 30px " : itu artinya nilai untuk padding atas (top) dan bawah (bottom) nilainya sama sebesar 50px , sedangkan nilai padding kanan (right) dan kiri (left) mempunyai nilai sama sebesar 30px .
Untuk penulisan value dan property margin sendiri sama persis dengan cara penulisan padding, bisa secara individu bisa secara shorthand atau disingkat , contohnya seperti ini :
margin-right : 30px
margin-bottom : 50px
margin-left : 30px
Secara Shorthand :
" margin :50px 30px 50px 30px " atau " margin :50px 30px " .
Tapi ada satu tambahan nilai atau value untuk property margin yaitu auto . Penulisan nilai auto pada property margin biasa nya di gunakan untuk membuat suatu posisi elemen berada di tengah dan biasanya elemen itu berupa layer atau layout suatu halaman dan bisa juga berupa image .
+
Ada 2 komentar Untuk: Mengenal Property Padding Dan Margin
Sy mau belajar blog ajarin lewat blogmu
saya juga diajari lewat blogmu kang :D
Posting Komentar Untuk Artikel Ini :