Memahami property padding dan margin

November 21, 2012

Trend mode Bra 2013
Okey kali ini pak guru bajakan akan melanjutkan menulis kelanjutan dalam memahami struktur dari template blog bagian ke ke tiga, khususnya blogspot. coz kalau WordPress agak ribet kecuali kita mBayar...keliatannya WordPress lebih kere dari Blogspot yang mudah memberikan gratisan. Dengan Blogspot kita bebas berkreasi, dan sekedar saran jika meng-edit template blog gunakan browser Chrome jangan FF atau yang lain. Dengan Chrome kita lebih mudah meng utak atiknya. begitulah pengalaman pak guru bajakan saat membandingkan memakai browser dalam meng edit blog gratisan.

Perlu dicatat sekali lagi, tulisan ini hanyalah sebagai catatan pribadiku, bukan bermaksud menggurui atau sejenisnya, jadi jika kalian kebetulan nyangkut di blog ini, dan membaca tulisanku lalu tulisan ini kemungkinan banyak salah dalam memberi pengertian, maklum saja, karena aku sendiri juga masih belajar (makanya aku menyebutnya sebagai guru bajakan, tentu sangat beda dengan guru asli)

Berhubung hari semakain malam, maka singkat cerita kita mulai saja bahas pengertian padding dan margin, pada tutorial terdahulu, kita sudah banyak membahas topik ini, tapi sebagai pemantapan dalam pemahaman tidak ada salahnya kita mengulang agar lebih memahami dalam penulisan properti tsb, mengapa ?, karena properti ini sangat erat kaitannya dengan bentuk tampilan baik pada home page maupun postingan.

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.


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 .

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 % .
Contoh penulisan padding secara individu :
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. 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 berikut:.

" 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-top : 50px
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 .

Kita semakin memahami property diatas, selanjutnya kita melangkah pada editing atau mengubah tampilan blog, ingat mengubah bukan mendesain karena kalau mendesain kita agak sedikit ribet, harus upload komponen yang berhubungan dengan tampilan blog satu2 jadi lebih baik kita mengubah tampilan template yang sudah ada saja. Kecuali pekerjaan kita memang sebagai desainer web atau blog. Walaupun teknik yang aku tulis ini juga bisa untuk membuat desain blog.

Sebagai saran jika kalian ingin menjadi desainer web/blog yang profesional tidak hanya sekedar utak atik, sebaiknya memakai bantuan software desain grafis seperti CorelDraw dan Photoshop. Dengan bantuan software ini kita dapat membayangkan tampilan akhir blog kita seperti apa nantinya, selanjutnya setelah cocok, barulah kita implementasikan kedalam format CSS, menyisipkan coding HTML atau Javascript yang berisi perintah2 untuk menjalankan CSS tadi. Tapi pak guru bajakan tidak membahas soal desain, cuma membahas bab mengubah tampilan yang sudah ada  agar mendekati selera kita.

Demikian akhir pembahasan bab padding dan margin, pada lain kesempatan kita akan bahas oprek template blog menjadi lebih sepesifik.

You Might Also Like

0 Comments

» Komentar anda sangat berguna untuk peningkatan mutu posting
» Terima kasih bagi yang sudah menulis komentar.

SUBSCRIBE NEWSLETTER

Get an email of every new post! We'll never share your address.

Flickr Images