19 Nisan 2013

Padding ve Margin Özelliklerinin Kullanımı

Padding ve margin özellikleri css'de en sık kullandğımız özellikler arasında yer alır. Padding, bir nesneye içerden müdahale etmemizi (uzaklaştırmamızı veya yakınlaştırmamızı) sağlar. Bu konu hakkında tonlarca yazı yazılabilir aslında!.. Ama bana göre konuyu tam olarak anlamınız açısından aşağıda verilen kullanım şekillerini incelemeniz daha sağlıklı (yeterli) olacaktır.

Padding Özelliğinin Kullanımını İçin Verilebilir Değerler:

padding: 15px(üst) 15px(sağ) 15px(alt) 15px(sol);
padding: 15px(üst) 15px(sol ve sağ) 15px(alt);
padding: 15px(üst ve alt) 15px(sol ve sağ);
padding: 15px(dört kenara birden müdahele et);
padding-top:7px;(üst)
padding-left:4px (sol)
padding-right:4px (sağ)
padding-bottom:10px (alt)

Margin ise, aksine dışardan müdahele (uzaklaştırma veya yakınlaştırma) yapmamızı sağlar. Margin kullanacağımız elment border içinde ise, border ile arasındaki mesafeyi ayarlamamızı sağlar.Asıl amaç border ile arasındaki mesafeyi ayarlamak ama, nesne border içinde değilse bile bunu yapmamızdada herhangi bir zarar yoktur. Bu kullandığımız nesneye bağlıdır.

Margin Özelliğinin Kullanımını İçin Verilebilir Değerler:

margin: 15px(üst) 15px(sağ) 15px(alt) 15px(sol);
margin: 15px(üst) 15px(sol ve sağ) 15px(alt);
margin: 15px(üst ve alt) 15px(sol ve sağ);
margin: 15px(dört kenara birden müdahele et);
margin-top:19px;(üst)
margin-left:6px (sol)
margin-right:6px (sağ)
margin-bottom:19px (alt)

Parantez içine aldığım (üst) (alt) gibi yazıları verilen değerlerin maksadını (amacını) daha detaylı anlamanız için belirttim.Örnek bir kullanımla anlatımı bitirelim.

Margin ve Padding Kullanım Örneği:

p.ornek{
margin: 15px 12px 0px 5px; /*distan ayarlari*/
padding: 15px 4px 50px 20px;/*icten ayarlari*/
border:solid 1px red /*Kenar cizgileri*/
} 

Örnek

p{margin: 15px 12px 0px 5px;padding: 0px 4px 3px 5px}