Merhaba,

Bir önceki yazımızda padding ve margin değerlerimizi görmüştük. Bu yazımızda ise padding ve margin değerlerini, öğenin farklı yanları için farklı değerler belirterek kullanmayı ve farklı yazım tiplerini göreceğiz.

Doğrudan margin:20px; gibi bir kullanım, öğenin 4 yanına (üstü, altı, sağı ve solu) margin değeri atamamızı sağlar. Bunu margin-top, margin-bottom , margin-left,  margin-right şekillerinde de 4 yanını ayrı ayrı belirterek kullanabiliriz.

p{ padding: 20px;}

kullanımı ile;

p{ padding-top: 20px; padding-bottom: 20px; padding-left: 20px; padding-right: 20px;}

kullanımı, aynı işlevi görecektir. Bununla birlikte ikinci kullanımda değerlerimizi farklılaştırarak öğemizin farklı yanlarındaki margin veya padding değerlerini farklılaştırabiliriz.

Bununla birlikte her bir değeri ayrı ayrı CSS özelliği olarak yazmak yerine, tek bir paddingözelliği içerisinde farklı değerler atayarak da kullanabiliriz.

p{ padding: 20px 0 10px 50px;}

Bu şekilde bir kullanım sırasıyla üst, sağ, alt, sol değerlerini belirtir. Yani saat yönünde düşünebiliriz.

2 veya 3 değer ile kullanım

Özelliğimize yalnızca 2 değer veya 3 değer vererek de kullanmamız mümkün.

p{ padding: 20px 0;}

Burada belirtilen 2 değerin ilki üst ve alt boşlukları, ikincisi ise sağ ve sol boşlukları belirtir. Böylelikle üst – alt boşlukları aynı değer (örnekte: 20px) ve sağ – sol boşlukları da aynı değer (örnekte: 0) taşıyacaktır.

3 değer belirtirsek de, üst, sağ-sol ve alt değerlerini belirtir. Yani ilk değer üst boşluğu, ikinci değer sağ ve sol boşlukları (aynı değer) ve son değer de alt boşluğu belirtir.