CSS buat pemula, menggunakan margin dan padding

Bukan mimpi kalo siang hari bolong begini saya posting. Niat penulisan ini muncul saat dalam perjalanan menuju tempat klien. Daripada melamun ya mending mikir yang lain dan hasilnya adalah ide penulisan tentang penggunaan margin dan padding dalam CSS. Mungkin terdengar atawa terbaca sederhana, yah namanya juga buat pemula, jadi buat yang sudah paham apa itu margin dan padding, silakan dilewat, buat yang belum paham atau masih katrok silakan dilanjut gan.

CSS dalam penggunaannya tidak hanya berperan sebagai sarana make up atau dekorasi suatu tampilan saja, tapi juga bisa lho digunakan untuk membuat suatu layout yang menurut saya, cepat, singkat dan bersih plus debugging yang tidak merepotkan dibanding penggunaan tabel sebagai layout.

Nah untuk itu kali ini ijinkan saya mendulang isi perut CSS untuk disajikan dari dan untuk para pemula (well, saya kan rajanya pemula, alias original newbie 😀 ).
Yuk kita mulai (hehehe, pengantarnya kebanyakan ya :P)

Sebelum lebih jauh melangkah (mau kemana Gan? jemput pacar? kejar kereta atau dikejar kereta? nah yang terakhir sereemmm 😀), gak baik kalo gak tahu definisi dari apa yang mau dipelajari sama-sama.

Margin : jarak terluar antara suatu elemen dengan elemen lain dalam suatu struktur layout. Terbagi atas jarak terluar dari sisi atas, kanan, bawah dan kiri atau biasa dikenal dengan istilah
margin-top, margin-right, margin-bottom dan margin-left.

itu margin, bagaimana dengan padding?

Padding sendiri adalah jarak antara inti elemen dengan bagian terluar elemen itu sendiri. Seperti halnya margin, padding juga tersusun atas padding atas, padding kanan, padding bawah dan padding kiri alias padding-top, padding-right, padding-bottom dan padding-left.
Sampai sini saya yakin masih belum ngeh. kecuali anda punya indera kelima setengah (kalo indera keenam mah dah ada bahkan sudah dibuat filmnya “Sixth Sense”), yaitu indera visualisasi yang memadai untuk menerawang maksud saya saat menulis artikel ini.

Biar gampang, kita pakai gambar aja ya (gambarnya mungkin kurang bagus, maklum dibuat dengan Notepad ++ dan kode-kode css itu sendiri – blogger miskin, photoshop saya dah expire trial 30 harinya 😀 – dan hingga kini kotak amal nganggur gak ada yg isi tuh :)) )

Gimana gambarnya eh maksud isi gambarnya dah jelas belum? Kalo belum jelas, kirimkan lewat kotak komentar aja ya. Paling tidak gambarnya bagus kan :))

Dari gambar diatas (jangan ketuker sama gambar di tab browser sebelah, itu sih gambarnya mie ayam jepang alias mie ya bi ya :P), bisa dilihat bagaimana cara kerja (sok teknis bahasanya :D) margin dan padding itu sendiri dan akibatnya terhadap lebar suatu box elemen.

Jarak tiap-tiap padding : ditandai dengan arrow box dengan latar belakang coklat,
sedang untuk margin ditandai dengan arrow cloud latar belakang kuning.

Penulisan yang baik dan benar adalah dengan urutan sebagai berikut:
padding-top
padding-right
padding-bottom
padding-left

tampak seperti arah jarum jam, dari atas (top) lalu ke kanan (right) trus ke bawah (bottom) dan berakhir di kiri (left).

dan dari gambar diatas, maka penulisannya adalah:

.box {
padding-top : 25px; padding-right : 25px; padding-bottom : 25px; padding-left : 25px; }

begitupun dengan penulisan margin dari gambar diatas :
.box {
margin-top : 5px; margin-right : 5px; margin-bottom : 5px; margin-left : 5px;
}
perhatikan cara penulisannya, agar dibiasakan mengakhiri setiap deklarasi dengan tanda semi colon alias “;” (tanpa tanda kutip ganda).

bagaimana dengan lebar box itu sendiri?

Nah ini bagian yang sensitif ( pengalaman penulisan width dan padding, bukan pake Test Pack ye ), adalah efek terhadap lebar total elemen box yang bersangkutan.

Secara umum lebar total (Width) dapat dirumuskan sebagai berikut:
width total =
( element width ) + ( padding-right + padding-left ) + ( margin-right + margin-left )
So sampai sini dulu pelajaran css kali ini. Semoga memberi pencerahan meski tidak lebih terang dari nyala api lilin.

So, tanpa terasa sudah sore dan saya mau sambung nonton TV dulu, lihat Koo Hye Sun – artis Korea yang asli bening 😀

*thanks buat saudara Heri09 untuk koreksinya. (beginilah efek posting sambil nonton film :D)

Comments are closed.