CSS >> Margin

Sebelumnya kita sudah mencoba float, clear dan juga position. Berikutnya adalah margin. Nanti setelahnya kita akan mencoba Padding.

Saya berfikir dahulu, bukan pusing

Sebelumnya kita pelajari bahwa namanya halaman memiliki namanya margin. Kalau dalam analogiku, margin = lajur. Atau kita bisa katakan batas. Batas dari sisi terluar hingga terdalam. Atau bisa kita bilang seperti besar area diluar dari area rumah/kamar kita. Nantinya kita akan pelajari Padding, dimana dari sisi area rumah kita.. harus masuk kedalam beberapa pixel. 

Saya sudah terjebak dengan pemakaian padding dan margin. Pemakaian yang saya maksud adalah menentukan 'jumlah' sebenarnya yang digunakan oleh area (DIV) yang saya beri style tersebut. Untuk margin, area yang saya beri akan bertambah sejumlah dengan margin yang diberikan. Misal saya memiliki 100 pixel (horizontal), saat saya beri margin 20.. maka kita akan dapat 140!! karena ada 20 pixel tambahan. Sedangkan Padding kita beri 100, maka tetap 100! Namun penjelasan Padding akan dibahas nanti.

Penggunaan margin dalam html/css adalah

margin: 0px;

atau

margin: 10px 10px 20px 20px; 

dapat dipecah menjadi

• margin-top
• margin-right
• margin-bottom
• margin-left

tanpa basa-basi inilah contohnya.

margin:10px

margin:10px 20px

margin:10px 0

tampaknya untuk tampilan di atas tidak menyertakan margin-top dan bottom... jadi bentuknya tidak sesuai keinginan. jadi kumasukkan padding 1px untuk gambaran saja.

margin: auto; width: 300px;

Untuk membuat ditengah.. tulis saja margin auto, jangan lupa ukurannya (300px). tidak memberikan berapa panjangnya tidak akan bisa menjadi ditengah seperti di bawah

margin: auto;

intinya.. jangan menjadi

pusing