Mengenal Margin dan Padding

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;
}

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.