Padding ve Margin

Bu günlerde bloga yazacağım yazılar daha çok CSS ve PHP ile ilgili olacak. Çünkü bu ikisi üzerinde zaman harcıyorum. Bu yazımda CSS‘de padding ve margin özellklerini anlatmaya çalışacağım.

İlk olarak 270px eninde ve 40px boyunda bir alana sahip olduğumuzu düşünelim. Bu alanın 10px’lik border’ı olsun. Bu alandaki içeriğimizin border’a yapışık olmasını değil de border ile aralarında belirli bir boşluk olmasını istediğimiz durumlarda padding özelliğini kullanırız.

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