Mengenal Margin Dan Padding

Dalam pembuat ataupun pengeditan Templates Blog kita akan sering menjumpai kata Margin dan Padding dengan Value yang bermacam. Tapi apakah fungsi mereka sebenarnya?. Margin dan Padding merupakan bagian terpenting dalam pembuatan Box Model, yang memungkinkan kita untuk menempatkan border dan jarak pada setiap element. Tetapi untuk kali ini kita hanya akan membahas Margin dan Padding

Margin pada Templates Blog berfungsi untuk memberi jarak antara sisi terluar sebuah objek dengan sisi terluar objek lain yang berada di luar objek pertama. Sedangkan untuk Padding berfungsi untuk memberi jarak sisi terluar sebuah objek dengan sisi terluar objek lain yang berada di dalam objek pertama. Objek kedua yang berada di dalam objek pertama biasa kita kenal dengan sebutan elemen.

Menurut "Coretan"
di atas, dapat memberikan gambaran yang mana Margin dan yang mana Padding bukan?? :$ bagi yang belum coba lihat gambar di bawah

nb : Border dan Content merupakan parts(bagian) yang lain dari Box Model

Margin dan Padding terbagi menjadi empat bagian yaitu :

1. (Margin atau Padding)-Top : untuk Margin dan Padding bagian atas.
2. (Margin atau Padding)-Bottom : untuk Margin dan Padding bagian bawah.
3. (Margin atau Padding)-Left : untuk Margin dan Padding bagian kiri.
4. (Margin atau Padding)-Right : untuk Margin dan Padding bagian kanan.

Adapun value yang dapat kita gunakan untuk mengatur Margin dan Padding, yaitu:

• Auto (Margin tidak dapat menggunakannya)
Padding di set Otomatis oleh browser
• Length
Mendefinisikan Margin dan Padding tetap (pixel, pt, em, dll)
• Percent(%)
Mendefinisikan Margin dan Padding dalam Percentase(%) berdasarkan ukuran(Width dan Height) seluruh element yang di gunakan.

Beberapa Contoh Margin dan Padding
Contoh untuk Margin

1. margin:25px 50px 75px 100px;
• top margin = 25px
• right margin = 50px
• bottom margin = 75px
• left margin = 100px
2. margin:25px 50px 75px;
• top margin = 25px
• right dan left margins = 50px
• bottom margin = 75px
3. margin:25px 50px;
• top dan bottom margins = 25px
• right dan left margins = 50px
4. margin:25px;
• all four margins are 25px

Contoh untuk Padding

1. padding:25px 50px 75px 100px;
• top padding = 25px
• right padding = 50px
• bottom padding = 75px
• left padding = 100px
2. padding :25px 50px 75px;
• top padding = 25px
• right dan left padding = 50px
• bottom padding = 75px
3. padding :25px 50px;
• top dan bottom padding = 25px
• right dan left padding = 50px
4. padding :25px;
• padding seluruh sisi = 25px