Cara Mengatur Margin dan Padding Menggunakan CSS
Kemampuan yang kedua setelah mewarnai background menggunakan css selanjutnya adalah mengatur padding dan margin. Padding dan margin akan membuat tampilan lebih rapi dan enak untuk dilihat. Jika padding dan margin tidak ada maka semua konten atau box yang ada dihalaman web akan lengket atau merapat. Dengan alasan tersebut padding dibuat untuk memisahkan atau memberi jarak satu sama lain.
Padding gunanya untuk memberi jarak dari suatu box terhadap apa yang di dalamnya, namun efeknya box menjadi bertambah besar. Jadi guna padding agar yang di dalam box tidak lengket pada pinggiran box. Contohnya pada gambar di atas tulisan tidak lengket di sudut kiri atas box.
Margin gunanya untuk memberi jarak antara suatu box terhadap apa yang ada di luarnya. Box-box akan saling lengket dinding luarnya jika tidak diberi margin. Contohnya jika ada dubuah box tanpa margin maka salah satu sisinya akan lengket.
#file html
#file css (marginpadding.css)
Box satu dan box dua tanpa margin dan padding. Masing-masing ukuran width dan height 100px.
Untuk ukuran box ketiga ukuran width dan height 80px menandakan lebih kecil. Mengapa ukuran box satu dan tiga sama yaitu karna ada penambahan padding sebesar 10px untuk margin-top, margin-bottom, margin-left, dan margin-right. (widht +20px dan height +20px) box satu = box tiga. Namun isi dari box dimulai dari ukuran box semula.
Box tiga juga menggunakan margin-bottom sebesar 10px sehingga box tiga dan box empat berjarak.
#tampilan
Catatan: Isi dalam box juga bisa memiliki padding dan margin juga. Sehingga sebenarnya kita bebas menggunakan padding atau margin untuk memberi jarak antara box dengan isi. Sedangkan untuk memberi jarak antara box dengan luarnya sudah pasti harus menggunakan margin.
Terima kasih.
