Yukarıdaki şekilde 270px-40px boyutundaki içeriğimizin border’ı ile arasında üst ve alt bölümde 30px, sağ ve sol bölümde ise 20px boşluk bulunmaktadır. Bu boşlukların alanımızın boyutunu artırdığını unutmamalıyız. Yukarıda bulunan şekildeki gibi bir yapıyı oluşturmak için gerekli olan kodlar aşağıdadır.

#icerik {
width:270px;
height:40px;
padding:20px 30px 20px 30px;
}

Padding‘in hemen ardından belirttiğimiz boyutlar sırasıyla üst alan, sağ alan, alt alan ve sol alana aittir. Eğer alanımızın her tarafının değil de bir bölümünün üzerinde değişiklik yapmak istiyorsak aşağıdaki kodları kullanabiliriz.

padding-top:20px;
padding-right:30px;
padding-bottom:20px;
padding-left:30px;

Yukarıdaki kodları ilk örneğimize uygularsak yine aynı sonucu alırız. Fakat her tarafa padding özelliği uygulamak istemediğimiz durumlar olacaktır. Böylesi durumları aşmak için iki tane yöntemimiz var. Birincisi padding-top, padding-right, padding-bottom ve padding-left özelliklerinden istediğimizi kullanmak olacaktır. İkinci yöntem ise birinci kodumuzdaki (padding:20px 30px 20px 30px;) kullanmak istemediğimiz yönleri 0px yapmaktır. Üst ve alt alanlarda boşluk bırakmak istemediğimiz bir örnek gösterelim:

padding:0px 30px 0px 30px;

Ben 3-4 satır kod yazmak yerine ikinci yöntemi kullanarak işimi tek satırda hallediyorum. Tek satırlık kod sadece beni değil web sitemizin bulunduğu sunucuyu da yormuyor.

Diğer özelliğimiz ise margin. Margin özelliğini ise alanımızın diğer alanlarla arasında mesafe olmasını istediğimiz durumlarda kullanırız. Margin’in kullanımı da aynı padding gibidir. Bu yüzden üzerinde fazla açıklama yapmayacağım. Aşağıdaki kodlar yukarıdaki şekle aittir.

#icerik {
width:270px;
height:40px;
padding:20px 30px 20px 30px;
margin:20px 20px 20px 20px;
}

Yukarıdaki kodlar alanımızın 20px yakınına hiçbir şeyin yaklaşamayacağını belirtmektedir. Tüm yönlere eşit uzaklık vereceğimiz durumlarda yukarıdaki kodun (margin:20px 20px 20px 20px;) yerine aşağıdaki kodu kullanabiliriz.

margin:20px;

Kaynaklar;
http://www.w3schools.com/css/css_padding.asp
http://www.w3schools.com/css/css_margin.asp
http://www.fatihhayrioglu.com/?p=13

#ustbolum {
width:800px;
} /* banner bulunan bölümün css kodlarının bitişi */

Burada ” /* ” ve ” */ ” işaretleri arasında kalan bölüm açıklama satırıdır.