V r.BetaSetiap 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;
}
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.
Lihat juga di www.w3schools.com
SUMBER
1. Kupas Tuntas Css oleh Dominikus Juju
Iko lebih gak ngerti lagi... :D
ReplyDeleteKirain Margarin dan Pudding... hehehe.... jadi laper!!!
mantabs...
ReplyDeleteThanks om, mau ta belajar kotak katik margin en padding biar layout nya kaya' punya om
ReplyDeleteThanks for the inspiration
@ Free Online
ReplyDeletesama-sama boss.. happy blogging
kan ada px,cm, dll tuh yang om poss,,, trus em itu satuannya pa yah???
ReplyDeletemaap nubiee..
Langsung ke TKP. Thank's bro..
ReplyDeletemargin diperlukan agar objek tidak nabrak dinding, sedangkan padding agar tidak nabrak margin.
ReplyDeletebegitu ya mas...?
thank gan buat ilmunya...
ReplyDeleteAl Muayyad