Margin dan Padding

Margin dan padding merupakan suatu property CSS yang tidak asing buat sobat blogger yang senang dengan mengedit template, di postingan ringan ini saya mencoba mengenal margin dan padding dengan gaya bahasa saya sendiri dan tidak lebih untuk sebagai media catatan saya dan bukan bermaksud untuk menggurui., karena pada dasarnya saya juga sering lupa perbedaan margin dan padding ini :p. 
Untuk memudahkan sobat dalam mengenal margin dan padding ini saya akan berikan screenshootnya seperti di bawah ini :  



Masing-masing element saya definisikan nilainya sebagai berikut :
element 1 { margin:0px; padding:0px;}
element 2 { margin:0px 10px 10px 0px; padding:0px 10px 10px 0px}
element 3 ( margin:0px; padding:0px}

Sekarang masuk ke definisi margin dan padding  :

Margin : Digunakan untuk mengatur jarak border batas atas (top), kanan ( right ), bawah ( bottom ) dan kiri ( left ) antar elemen (E2) dengan element di luarnya (E1)
 
Syntax  propertynya :
     margin-top : value;
     margin-right: value;
     margin-bottom: value;
     margin-left: value;


Bisa ditulis shorthand property (secara singkat) :
contoh: 

margin {10px 20px 10px 0px}

Padding :  Digunakan untuk mengatur jarak border batas atas (top), kanan ( right ), bawah ( bottom ) dan kiri ( left ) antar elemen (E2) dengan element di dalamnya (E3}

Syntax propertynya : 
     padding-top:value;
     padding-right: value;
     padding-bottom:value;
     padding-left:value;


Bisa di  tulis Shorthand Property (secara singkat) :
contoh: 
padding {10px 20px 10px 0px}

Pada hal ini kita hanya fokus pada element 2 (E2) saja dimana saya sudah berikan margin bottom E2 dengan garis merahnya, margin right E2 garis kuning, padding bottom E2 dengan garis hitamnya, dan padding right E2 garis ungu dan nilai-nilai yang saya berikan untuk element 2 akan memberikan tampilan seperti screenshoot di atas, beda lagi apabila kita memberikan nilai element 2 (E2)dengan 0px uintuk margin dan paddingnya, maka element tersebut akan berdempetan dengan element 1 (E1) karena margin E2 0px dan element 3 (E3) karena padding E2 0px.
Semoga pengertian margin dan paddng ini dapat membantu sobat untuk lebih dalam mengenal property css, dan saya harapkan postingan ringan ini bermanfaat buat sobat blogger and happy blogging.


Sumber :
  1. Mengenal margin dan padding oleh Suhu jaloee 
  2. Setting properties of container 
  3. w3schools

52 comments:

  1. Cocok ...kebetulan. pembahasan awal...Saya lg belajar kang..saya ikutin truss...!

    ReplyDelete
  2. Mau tnx nih bang, semisal cssnya gini
    padding: 3px 0px 2px 0px;
    nha padding yg untuk kiri,kanan,atas ma bawah itu yang mana?
    Mkasih atas penjelasannya.. :-P

    ReplyDelete
  3. Wow...keren
    nambah ilmu lagi gw dari kang mochal

    Tau aja kalau gw suka ngotak-ngatik template..he...he..he...

    Thanks Bos

    ReplyDelete
  4. @ bang ir > sama-sama
    @ erwein > mengikuti arah jam bro, di mulai dari atas-kanan-bawah-kiri con: {10px 20px 30px 40px} atas:10px kanan:20px bawah:30px kiri:40px

    ReplyDelete
  5. wah lagi nulis tengtang margarin sama pudding yach suhu..xixixiixi

    ReplyDelete
  6. @ jaloee > ho oh kang daripada lupa wekekekekek

    ReplyDelete
  7. ini baru penjelasan CSS namanya... nice post bro...!

    ReplyDelete
  8. he..he..ternyata ada aturanya juga toh kalo mau ngatur jarak. lha kalo ngatur jarak antara gadis rantau blog sama thinking out of the box blog tuh gimana ya*gubrak!*

    ReplyDelete
  9. pas banget tutorialnya, keren mas

    ReplyDelete
  10. wah makasih nih pak komandan....dan baghee bagheee puding...ama margarin...wuakakakaka nutrutin bang jaloe akh....kang makasih nih ilmunya aku tanam dulu di otak aku yah.....

    ReplyDelete
  11. Huhuehuehuheu...... justru yang dasar seperti ini yang sering di cari! Postnya keren...... hueheuheuheu.........

    ReplyDelete
  12. mulai belajar template ahk.. jadi saya ikutin terus ilmu nya Guruh subagya

    ReplyDelete
  13. mulai dengan artikel yang cukup bikin pusing btw selamat tahun baru 2009 ya..

    ReplyDelete
  14. Kebetulan saya lagi utak-atik template biar keliatan ada perubahan di tahun baru 2009. :D

    ReplyDelete
  15. SUHU Komandan...ada meteri baru rupanya...masgin & masding..cakep2 gk tuh?? boleh juga tar aku kenalan ama mereka"..hheee

    ReplyDelete
  16. jadi di pinggir itu margarin ditengahnya pudding, wee...mas rasanya kok lunyu-lunyu asin..manis ngene yo mas, mirip permen campur garam hahahha...
    ilmumu pancen nggetop mas...

    ReplyDelete
  17. tks dah bagi2 ilmu. met tahun baru ya.

    ReplyDelete
  18. terus menyimak... numpang baca2 ya mas.. lagi belajar blogspot neh..

    ReplyDelete
  19. Menyoba membaca secara seksama dan teliti..
    Sukses!

    ReplyDelete
  20. Dari dulu saya selalu bingung ama padding ama margin, boss. Bisa liat template saya bentar, boss. Tau nggak caranya membuat jarak antar widget di bottom area jadi agak sempitan dikit?

    ReplyDelete
  21. ada yg masih bikin binun chal...xxixixiixix

    ReplyDelete
  22. wew chal...bannernya masih mengarah ke ipietoon loh xiixixixix

    ReplyDelete
  23. @ anthony > menurut saya sudah bagus kok om
    @ cebong > namanya juga usaha wekekekekkeke...

    ReplyDelete
  24. Templatenya makin makyoss aja mas..

    Btw untuk bertukar link silahkan komentar di tukeran link mas

    ReplyDelete
  25. ko samaan neh bro...wekekek

    ganti templit :D

    baidewei, eheemmmm, imelnya apa yakkk...xixixi ane mo jual diri ke mochallll...xixixi

    ada yg marah ga yah...wakakakak

    ReplyDelete
  26. Sama seperti mbak ebong, masih ada yang bingung... :)

    ReplyDelete
  27. kok tumben posting soal "margarine dan puding" Kang...(lariiii....., suhunya marah)

    ReplyDelete
  28. ah... bikin pusing aja... enak makan puding aja heheh...

    ReplyDelete
  29. ilmu baru euy ... catet di otak ah

    ReplyDelete
  30. Makin keren aja templatenya Bos...kayaknya kita sama Bos...suka ngotak ngatik template...bedanya saya gak bisa buat template sedang Bos Bisa...ha..ha..ha...

    Bos bisa buat template kayak Masenchips....?

    ya mirip punya Bos...cuma bedanya empat kolom di bawah kolom posting utama adalah kolom semacam katagory/label (bukan kolom posting )persis kayak kolom posting utama cuma menampilkan ringkasan posting (gambar kalau ada) masing2 katagori

    Thanks ya Bos

    ReplyDelete
  31. salam kenal, saya sangat suka dengan tampilan dan artikel di blog anda, saya akan berkunjung kembali, oya link anda akan saya tambahkan di book mark blog saya, hihihi . . .salam kembali

    ReplyDelete
  32. @ baka > secara konsep sih kayanya bisa bro.. hmm.. tapi pengaplikasiannya yang agak sedikit rumit. memakai bloglist.

    ReplyDelete
  33. Bloglistnya dimodifikasi aja Bos (Bos kan pintar)...jadi yang muncul di bloglist dibawah kolom postingan pertama bukan blog keseluruhan tapi khusus katagori atau label

    ReplyDelete
  34. @ baka > ya kapan-kapan saya coba :D

    ReplyDelete
  35. tutorialnya keren om, ditunggu terus tutorialnya. oya mampir yah k blog q. ada sesuatu yg menanti :D

    ReplyDelete
  36. Hai, salam.. saya bru belajar blog nih, dan dapet blog anda di btemplates.com dan saya suka sekali dengan yang Simple box. tapi... saya pengen ngerubah read morenya itu jadi full post. Gimana caranya?? please help...! :) Thx in advance..

    ReplyDelete
  37. @ amanda : salam kenal juga, kalau yang mau versi full postnya sudah ada kok mba silahkan ke Simple Box Reloaded

    ReplyDelete
  38. mas kalo marginnya diubah, ntar yang bergerak bordernya apa luarnya?

    kalo paddingnya diubah ntar yang bergerak bordernya apa apa teksnya? makasih sebelumnya

    ReplyDelete
  39. baru tau saya,ternyata itu toh pengertian nya!

    ReplyDelete
  40. trima ksih kang..saya juga lagi bingung antara margin dan padding...

    ReplyDelete
  41. Jangan berhenti untuk terus berkarya,
    semoga kesuksesan senantiasa menyertai kita semua.

    Pasang Iklan Gratis Belajar Bisnis Online
    belajar bahasa inggris

    ReplyDelete
  42. Terimakasih telah berbagi informasi, semoga banyak membawa manfaat
    khususnya bagi pembaca setia blog ini.
    Internet Marketing Bisnis Pulsa

    ReplyDelete
  43. Cocok nih..saya lagi utak-atik template. Thank's mas.

    ReplyDelete
  44. cocok neh ma yang aq cari..., thx bro..

    ReplyDelete
  45. wah..wah..wah..
    jadi gak bingung lagi deh

    untuk sintak padding (padding:x x x x) berarti seurutan jarum jam ya mas ?

    atas, kanan, bawah, dan kiri ....

    sepz.. info bagus mas

    ReplyDelete
  46. Bermafaat bung blognya, jadi bisa kostumasi blogger...trims

    ReplyDelete
  47. JAdi tambah semangat belajar CSS.. ternyata apapun kalau dipelajari mudah..

    ReplyDelete
  48. @All : thanks dah mau berkunjung :) sorry kalau ane ga bisa bales satu persatu

    ReplyDelete