Berbagi Pengetahuan di Internet

Tutorial berikut ini adalah tutorial buat menjelaskan tentang fungsi dasar kode padding dan margin. Kode padding dan margin adalah kode css yang berfungsi untuk membuat perintah jarak atau space kode html  Fungsi padding dan margin tepatnya untuk widget dan gadget content antara border widget satu dan border widget lainnya. kedua kode diatas untuk membuat jarak widget di template blogger caranya bisa dengan menggunakan padding atau menggunakan margin.

Padding adalah jarak atau space widget yang mengarah ke widget bagian dalam, kode padding yang digunakan pada widget bagian luar.Sedangkan margin adalah kode yang berfungsi untuk membuat jarak ke bagian luar widget kode margin di pasang di bagian dalam widget. Untuk lebih jelasnya tentang padding dan margin perhatikan gambar berikut.

Padding, Margin Css

Contoh gambar diatas misalnya seperti berikut:
Garis border warna merah adalah kode widget, dan warna biru kode widget.content.
Untuk membuat jarak widget seperti gambar diatas dengan menggunakan fungsi padding adalah kode padding di simpan pada kode widget, sedangkan untuk menggunakan fugsi margin kode margin di simpan pada kode widget.content.


Dari contoh diatas kiranya cukup jelas untuk mengenal padding dan margin, selanjutnya adalah mengenal satuan padding dan margin, untuk satuan padding dan margin bisa dengan menggunakan dua cara diantararnya Statik dan Relatif. Tutorialnya seperti di bawah ini

1. Statik
* in -- satuan inchi
* cm -- satuan centimeter
* mm -- satuan milimeter
* pt -- satuan point (1point = 1/72 inchi)
* pc -- satuan pica (1pica = 12 point)
* px -- satuan pixel (satu titik gambar terkecil dalam layar monitor)
* auto-- tersesuaikan secara otomatis
2. Relatif
* % -- satuan persen
* em -- atau ems (1em = ukuran font yang tengah ada dalam elemen)
* ex -- 1ex = x-height suatu font (x-height biasanya setengah ukuran font)
Pada postingan ini akan mencoba menjelaskan dengan menggunakan "px"

Contoh Padding:

Contoh 1={padding:10px 5px 8px 6px ;}

Urutan angka dalam satuan "px" pada padding diatas memiliki arti "atas - kanan - bawah - kiri"

Contoh 2=Bila diuraikan menjadi seperti:
{padding-top: 10px ; /* jarak dengan garis pinggir atas */

padding-right: 5px; /* jarak dengan pinggir kanan */

padding-bottom: 8px ; /* jarak dengan pinggir bawah */

padding-left: 6px; /* jarak dengan pinggir kiri */}
Contoh 3= {padding:10px 5px } artinya:
{padding-top,padding-bottom:10px

padding-right,padding-left:5px}
Contoh 4= {padding:10px auto } artinya: sama dengan contoh 3

Contoh 5= {padding:10 auto 10 } artinya: sama dengan contoh 3
{padding-top: 10px ;

padding-right: auto;

padding-bottom: 10px ;

padding-left: auto; }
Inti kode kode di atas dasarnya sama

Sedangkan untuk Contoh margin caranya sama seperti contoh contoh padding, hanya mengganti padding dengan margin.

Selamat mencoba!!!

Comments: 26

  1. oh gitu y Fungsi nya,thanks Y gan Tutorialnya...
    salam kenal

    ReplyDelete
  2. makasih dah share Ilmu nya...menambah wawasan say
    salam kenal

    ReplyDelete
  3. thanks Your Info n Tutorial nya...
    menambah Ilmu buat saya ...salam kenal

    ReplyDelete
  4. makaish Bnayk Tutorial nya Izin Ke TKP salam kenal good luck always

    ReplyDelete
  5. thanks Tutorial nya,sangt bermanffat salam kenal gan good luck

    ReplyDelete
  6. ini yang ane cari gan,makasih tutornya...:D

    ReplyDelete
  7. thanks for sHared totorialnya...greetings Good luck alaways

    ReplyDelete
  8. makasih dah share...
    salam kenal Izin Ke TKP gan....

    ReplyDelete
  9. Pemaparan yg deail dan komprehensif..nice article!!
    terima kasih telah berbagi Sob..salam

    ReplyDelete
  10. thanks your Informations and Tutorialnya....salam kenal good luck always

    ReplyDelete
  11. thanks tutorialnya...
    menambah Ilmu saya

    ReplyDelete
  12. nice Post,Menambah wawasan saya
    salam kenl

    ReplyDelete
  13. makasih dah share Informasi and tutorialnya
    salam kenla

    ReplyDelete
  14. makasih atas infonya. . . . infonya sangat berharga buat saya. . . dan info ini benar-benar berguna buat saya. . .

    janagan lupa lihat blog saya juga yach. . .

    http://aboutinstallationlinux.blogspot.com/

    makasih. . .

    ReplyDelete
  15. wah makasih y Info nya Izin KE TKP...
    good luck..
    greetings

    ReplyDelete
  16. makasih infonya semoga sukses selalu majuterus dengan artikel dan bermanfaat untuk semuanya.lam kenal aja.

    ReplyDelete
  17. artikelnya bagus juga dan terima kasih atas infonya,semoga berguna dan menambah ilmu.lam kenal aja selalu.

    ReplyDelete
  18. artikel nya sangat bermnfaat banget nih..

    mksih ya buat info nya

    ReplyDelete
  19. mantaap gan,,

    baru tau nih satuan margin..

    thank ya

    ReplyDelete
  20. sangat di cari nih artikel ini..
    untung saya buka artikel ini,,

    terima kasih ya

    ReplyDelete
  21. makasih atas informasinya. . . . saya banyak belajar tentang ini dan situs ini benar-benar berguna buat saya. . . dan situs ini sangat menarik sekali. . .

    jangan lupa lihat juga blog saya. .

    http://aboutinstallationlinux.blogspot.com/

    terimakasih. . .

    ReplyDelete
  22. thanks mas bro ilmunya,brati blog q bisa dirubah nih,sekali lagi thanks

    ReplyDelete
  23. Mantap,,thanks atas ilmu yang telah share pada kami,,,

    ReplyDelete
  24. mantap infonya ... salam sukses

    ReplyDelete