Margin dan padding pada CSS



Persoalan klasik namun masih banyak yang mendapat problem disesi ini.

apa itu makhluk yang bernama margin dan padding itu?

margin adalah menentukan jarak komponen dari bagian paling luar, sedangkan padding adalah sebaliknya yaitu yang bagian dalam.

tarulah sekarang kita mengedit layout blogspot. (bagian content atau potingan dan sitebar).


yang saya tandai dengan garis merah tersebut adalah merupakan bagian luar dari komponen ini. tarulah saya tentukan ukuran lebarnya 760px saya beri nama bagian_content_luar. Nah pada bagian dalam komponen ini akan ada 2 komponen lagi yang tercipta. oleh karena itu perlu ditentukan berapa jaraknya dari bagian komponen (bagian_content_luar) ke bagian postingan dan header.

Ketika anda menggunakan code padding.... maka secara otomatis sisa ruang untuk dua komponen bagian dalam ini akan berkurang. tarulah anda memberi nilai padding: 10px; maka ukuran yang tersisa tinggal 740px; sebab akan terhitung dari komponen bagian_content_luar untuk sisa bagian dalam. lain halnya bila menggunakan code Margin, bila menggunakan perintah margin maka komponen bagian_content_luar ini akan bergeser (yang kiri bergeser ke kanan sebanyak 10px, dan kanan tidak bergeser namun akan memberi jarak kosong pada sebelah kanan sebanyak 10px; begitu pula pada bagaian atas dan bawah.

Sebaiknya.... bila anda memilih dalam menggunakan margin..!!! tentukan bagian per bagian, atau dengan kata lain atasnya berapa, kanan berapa, bawah... dll, dalam penulisan code untuk menentukan bagian per bagain terdiri dari dua cara yaitu:

1. margin: 2px 2px 5px 0px; urutannya --> Atas, kanan, bawah, kiri

2. margin-top: 2px; margin-right: 2px; margin-bottom: 5px; margin-left: 0px;

demikian juga halnya dengan padding bila di tulis bagian per bagain.



Ok saya akhir dulu postingan ini... sengaja saya posting pendek2 sebab bila postingan panjang sekali, saya khawatir... anda akan ngeri melihatnya maksud saya...!!! jangan sampai anda belum baca sudah takut... karena panajang sekali :D



Layout diatas di ambil dari layout4all boleh lihat tampilannya sini



 
© Copyright Blognya Noval Mbojo - Imnoval.com 2011 - Some rights reserved | Powered by Blogger.com.
Template Design by Catatan Mahasiswa Drop Out | Published by Premium Wordpress Themes
Margin dan padding pada CSS - Blognya Noval Mbojo - Imnoval.com