9 - mengatur margin header dan footer terhadap jarak selainnya

bila melihat kedua gambar dibawah , jelas terlihat header ada jarak dari auter-wrapper.
dan footer berdempetan dengan main-wrapper .
disinilah fungsi margin digunakan atau di edit .

susunan margin di header bawaan template adalah ;

#header-wrapper{
width:auto;
margin:0 auto 10px;
bla bla bla
}

agar susunan diatas menjadi simpel adalah merubah margin kalau mau .
kalau dibiarkan begitu , juga tak apa .
bila ingin di edit maka hasilnya;

#header-wrapper{
width:auto;
margin-bottom:10px;
bla bla bla
}

ukuran 10px itu tak baku , terserah tampilan jarak yang kalian suka ,
dan itu adalah jarak kotak header dan kotak auter-wrapper .

adapun jarak footer dan main-wrapper, maka ubah marginnya di main-wrapper .
jikalau margin tak ada , maka tambah susunannya .

pada susunan bawaan minima 2004 , margin tak ada , maka tambah susunannya .

#main-wrapper {
width: 410px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

hasilnya ;

#main-wrapper {
width: 410px;
border:1px solid #000;
float: left;
margin-bottom:10px;
word-wrap: break-word;
overflow: hidden;
}

bentuk tagalog keterangan dibawah ini , itu hapus saja , kalau mau ;

/* fix for long text breaking sidebar float in IE */
/* fix for long non-text content breaking IE sidebar float */

adapun jarak footer ke atribut maka edit di footernya [ kalau atributnya tak dihapus ] ,
minima 2004 margin footernya telah ada , tinggal di edit;

#footer {
width: 660px;
clear: both;
margin: 0 auto;
bla bla bla
}

dikarenakan header dan footer telah terpisah dari auter-wrapper , maka pakai saja margin-bottom .
hasilnya ;

#footer {
width: 660px;
clear: both;
margin-bottom:20px;
bla bla bla
}