Belajar CSS: Margin dan Padding

Materi belajar css berikut adalah membahas tentang margin dan padding. Margin adalah salah satu property CSS yang berfungsi untuk memberi jarak atau batas luar pada setiap sisi. Margin atas, kanan, bawah, dan kiri dapat diubah secara independen menggunakan properti terpisah. Atau bisa juga menggunakan properti yang mengatur margin ke empat sisi sekaligus. Masih ingat kan, gambar ilustrasi tentang apa itu margin dan padding? Kalau sudah lupa, silakan review kembali materi belajar CSS box model di sini.

Katakanlah kita ingin membuat margin atas 100 pixel, margin kanan 40 pixel, margin bawah 10 pixel dan margin kiri 70 pixel, maka kode CSS Margin untuk penentuan margin tersebut adalah:

?

1 2 3 4 5 6 7 8 9 10 11

body {   margin-top: 100px;   margin-right: 40px;   margin-bottom: 10px;   margin-left: 70px;   }

Atau paling sering kita lihat model singkatnya (shortand ) seperti ini:

?

1 2 3 4 5

body {   margin: 100px 40px 10px 70px;   }

Sedangkan Padding adalah satu dari beberapa property dalam css, yang berfunsgi memberi jarak atau batas(bagian dalam) pada suatu tag/box/bidang html.

berikut property padding;

• • padding-top
• • padding-right
• • padding-bottom
• • padding-left
• • padding(khusus shorthand)

value padding

• • angka(panjang) dalam px(pixel)
• • %
• • em, in dan pt
• • yang paling sering saya gunakan hanya px dan %

Contoh kode css untuk padding :

?

1 2 3 4 5 6 7

padding-top:25px;   padding-bottom:25px;   padding-right:50px;   padding-left:50px;

model singkatnya (shortand ) seperti ini :

?

1	padding:25px 50px;

Nah, selesai sudah materi belajar css tentang macam-macam model box. Saya yakin anda masih tetap semangat untuk belajar css kan? Jadi jangan sampai terlewatkan untuk tetap belajar pada materi berikutnya.