BloonOnline GoTemplatez VersiEdan
Facebook Twitter You Tube Friendfeed
Blog Seo Intermezo

Mengenal Margin dan Padding

Setiap kali mengedit halaman css blog kita , sering kita menjumpai tulisan margin dan padding. apa sih arti margin dan padding, dan apa kegunaan dan perbedaan antara margin dan padding untuk halaman blog kita.

Postingan ini atau pertanyaan ini, sebenarmya terlalu berat buat saya, karena telah memasuki wilayah teori, sedangkan saya tahu ngeblog dan ngedit-edit ala kadarnya, itupun template orang lain bukan buatan sendiri, dan seratus persen hasil dari otodidak. Do you know otodidac ? seseorang yang mengandalkan insting ke timbang ilmu yang pasti, seorang yang bersandar dan berlindung di bawah KUHP trial dan error.

Akan tetapi saya akan coba tulis ini, dengan meng-gadaikan kemaluan saya,... eh rasa malu saya.

Untuk memudahkan pemahaman saya telah membuat ilustrasi berupa gambar seperti di bawah. ( jika ada yang tidak setuju harap acungkan tangan ).

Dalam hikayat lain :

Margin : Digunakan untuk mengatur batas atas (top), Kanan ( right ), bawah ( bottom ) dan kiri ( left ) antar elemen/kolom halaman web. atau The CSS margin properties define the space around elements.

Sintaks :

selector { property : value } atau Body { margin-top : value; margin-right: value; margin-bottom: value; margin-left: value; }

bisa juga di singkat seperti ini. contoh:

Body { margin:10px 5px 10px 5px; }

/* menurut yang saya ketahui dari w3school.com urutannya searah jarum jam. jadi Top-Right-Bottom-Left. ( kalau ada yg tidak setuju silahkan ngacung ) */

Untuk nilai yang di atur, kita bisa mengunakan satuan pixel, centimeter, em, dan %

Browser dan W3c Support untuk margin.

Lihat juga di www.w3schools.com

PADDING : Padding mengatur batas antara garis border dan content ( isi ). atau padding hanya untuk mengatur batas atas, kanan, bawah dan kiri pada properti border saja. The CSS padding properties define the space between the element border and the element content.

Sintaks :

selector {properti: value} atau .Class { padding-top:value; padding-right: value; padding-bottom:value; padding-left:value; }

bisa juga di singkat seperti ini. contoh:

.Class { padding:10px 5px 10px 5px; }

/* sekali lagi urutannya searah jarum jam. jadi Top-Right-Bottom-Left. ( kalau ada yg tidak setuju silahkan ngacung atau protes, demi kebaikan bersama ) */

Note : biasanya kalau saya bingung mengatur nilai margin atau padding, saya langsung saja menyebutkanya. misal Margin-top: value; atau mengatur jarak sebelah kiri Padding-left:value;

sama seperti margin, untuk nilai yang di atur, kita bisa mengunakan satuan pixel, centimeter, em, dan %

Browser dan W3c Support untuk padding.

Technorati Profile

Lihat juga di www.w3schools.com

SUMBER

1. Kupas Tuntas Css oleh Dominikus Juju

2. www.w3schools.com

Technorati tags:
Page views this post: reader

19 komentar:

Shedtya said...

makasih mas neh infonya hehe,,,berguna bgt :D tapi kok ga ada yang koment yah,, weleh2 dah pada pinter kali yah hhehehehe...

subagya said...

hoohohoho, baru tahu saya :p . nice info kang

JoVie said...

hoho..baru tahu nih Kang Jaloe..kalo disini ternyata ada Margarin dan Puding juga...
nih Semangkanya....

nambongo said...

Thax, saya lg ngoprek template klasik. Agak bingung dengan istilah padding. It's helpful

dien said...

wah, aku akhirnya ngerti juga apaan tuh yang dimaksud dengan padding n margin meski belum bisa nerapin paling enggak aku udah punya gambaranya, atur nuhun kang!

DUNIA ELMUZANY said...

Bweh ilmu lagi, cm ttp bingung aja!

"Rabby zidny ilman war zuqny fahman"
Pasti bisa! Semangaaaaaaaaaaaaattt!!!!

ali febriyanto said...

sangat bermanfaat dan no 1 di google

kakangsung said...

bgtu yah,baru tau saya...
tengkyu kang bogel,infonya sangat brguna.
lam kenal..

JALOE said...

@kakangsung

met kenal jg.. makasih jg atas kunjungannya

Mamiek Trijoko said...

simple dan jelas....sy suka dg info yg seperti ini. Thx a lot, sgt membantu.

victz said...

wah nais...saya jadi bisa ngatur jarak widgetnya :)

blogoholic.web.id said...

meski rada-rada pusing plus bingung akan saya coba ngutak-atik meski tak tau gimana hasilnya..

Handry Usa said...

Makacih atas Info-Nya

Nambah follow duluh ah..


Follow me back ya

nantaPD said...

Html memang rumit.. saya masing bingung penerapannya.. Misalnya saya mau mengubah jarak antar widget bagaimana caranya bos?....

Mhd Asri said...

masih tetap gak berhasil sob,,
coba lihat menu HORIZONTAL yang lagi saya bikin,,
http://www.anak-smanda.co.cc/

Mas uwah said...

NIceee...

Free Download Anime said...

Thx infonya bro..
berguna banget.

Otaku News

Rian said...

Akhirnya tau apa yg dimaksut dengan margin dan padding.
maklum ya om gw masih newbie

Hedi said...

makasih infonya, sangat mudah dipahami tulisannya

Post a Comment

" Apapun Yang Dapat Anda Lakukan, Atau Ingin Anda Lakukan Mulailah

Keberanian Memiliki Kecerdasan, Kekuatan Dan Keajaiban Di Dalam-nya"

Makacih Atas Komentar-Nya

 

Copyright 2009. Home | Serba Serbi Google | XHTML | CSS Design by Catalog-Tutorial