CSS’de Margin ve Padding

CSS’de Margin ve Padding

Blogumun istatistiklerine baktığım zaman CSS üzerine değişik aramaların geldiğini görüyorum. Bu alanda eksik makaleler olduğunu ya da makelelerin yeterli olmadığını düşünerek bu aralar CSS üzerine ağırlık vermeyi düşündüm. Tabi diğer aramalar var ve kullanıcıların hangi konularda sorunlar yaşadığını az da olsa blog istatistiklerinden görebiliyorum. Zamanla bu aramalara açıklık getirmeye çalışacağım.

Çoğu sitelerde rastlayabileceğiniz CSS kodlarını en basit ve anlaşılabilir şekilde anlatmaya çalışacağım.

Web 2.0 ile birlikte CSS alanında içerik hizalamada sıklıkla kullanılan padding ve margin özelliğinden bahsedeceğim. Padding iç mesafeyi, margin ise dış mesafeyi ifade eder. Her iki özellik;

• Uzunluk değeri alabilir. Örn/ padding: 10px;
• Yüzdelik bir oran içerebilir. Örn/ margin: 75%;
• Veya otomatik bir değer alabilir. Bu değeri aynı zamanda içerik hizalamasında da kullanırız.  Örn/ margin: auto;

İlk önce padding değerini ele almak istiyorum. Ama ilk önce tüm örneklerde ortak kullanılan CSS kodumuzun aşağıdaki gibi olduğunu ve class öğesi içinde birden fazla CSS sınıfı kıllanabileceğimizi unutmalayım.

.css_genel{
width: 250px;
border:1px solid #39F;
background-color: #033;
color: #ccc;
font-style: normal;
font-family: "Courier";
}
.css_genel_ic{
border:1px solid #0F0;
background-color: #063;
}

Örneğin: <div class=”genel ozel”>…</div> uygulamasında ayrı ayrı genel ve ozel olarak 2 adet CSS sınıfı tanımlanmıştır.

Padding: Bu CSS kodu içeriği kenar sınırlarından ne kadar içe alınacağını belirler. Durumu somutlaştıracak olursak

.css_padding_1{
padding: 20px;
}

<div class="css_padding_1">Bu metin sınırlardan 20px içerde bulunuyor.</div>

şeklindeki bir kullanımda <div> tagı içerisindeki veriler aşağıda da görüleceği gibi <div> sınırlarından 20px içeridedir.

Bu kodu biraz daha özelleştirmek isteyebiliriz. Aşağıdaki sırayı ilerde performanslı CSS kodları yazmak için aklımızın bir köşesine yazalım. Ben bu sırayı hatırlamak için “ToRBaLı” veya İngilizce “TRouBLe” kelimelerini kullanıyorum.

.css_padding_2{
  padding-top: 20px; /* Üst boşluk */
  padding-right: 60px; /* Sağ boşluk */
  padding-bottom: 10px; /* Alt boşluk */
  padding-left: 40px; /* Sol boşluk */
}

<div class="css_padding_2">Bu alanda CSS Padding 2 örneği ele alınmıştır</div>

bu satırların nasıl göründüğünü aşağıdaki örnekten görebilirisiniz.

Margin: Bu özellik nesnenin sınırlarını dıştaki sınırlardan ne kadar uzak olacağını belirtir.  Bunu da somutlaştıracak olursak

.css_margin_1{
  margin: 20px;
}

<div class="css_genel">
  <div class="css_margin_1 css_genel_ic">Bu div tagı sınırları bir üst div tagın sınırlarından 20px içerisinde bulunuyor.</div>
</div>

kodlarını yazabiliriz. Bu kodlar tarayıcıda çalıştığında aşağıdaki gibi bir çıktı alınır.

Padding’de anlattığımız diğer özellikler de margin için geçerlidir.

Ne Zaman Padding, Ne zaman Margin Kullanılır?

• Padding, iç uzaklıkları ayarlar. Margin ise dış uzaklıkları.
• Eğer arkaplanı veya sınırları farklı renk veya ebatta olan bir içeriği bu özellikleri ile birlikte kenarlardan uzaklaştırmak istenirse margin kullanılır. Şayet renkler ve kenarlıklar sabit kalıp içerik sınırlardan uzaklaştırılmak istenirse padding kullanılır.
• Her ikisi de aynı sınıf içerisinde kullanılabilir.
• Ortalama işlemlerinde genellikle margin kullanılır.

Performanslı Tasarım

CSS dosya boyutunu küçültmek ve sayfa yüklenme süresini kısaltmak için (ki sunucunun bant kullanımını da hafifletir) padding ve margin değerleri tek bir satırda toplanabilir. Margin için ele alınmış örnekler padding için de geçerlidir.

.css_padding_3 { padding: 20px; }

Üst, sağ, alt, sol değerleri aynı olup 20px le eşittir.

.css_padding_4 { padding: 20px 50px; }

Üst-alt birbirine eşit 20px iken ikinci değer olan 50px sağ-sol uzaklıkları belirler.

.css_padding_5 { padding: 10px 20px 30px; }

Burada da 10px üst, 20px sağ-sol, 30px ise alt uzaklıkları belirtir. Çift terimlerin daima yan uzaklıkar, tek terimlerin ise alt-üst uzaklıklar oluduğunu unutmayın.

.css_padding_6 { padding: 10px 5px 20px 25%; }

Burada da “ToRBaLı” sıralamasını hatırlarsak üst boşluk 10px, sağ boşluk 5px, alt boşluk 20px ve sol boşluk içeriğin yanal uzunluğunun %25 değerini oluşturuyor.

Auto Değeri

Auto değerinin padding ve margin de nasıl bir etkiye sahip olduğundan bahsedelim. Auto değeri içeriğin hizalanmasında bir referans noktasına göre otomatik uzaklığını ele alır. Bu özelliği örnekte ele alacağım.

  .css_margin_2 { width: 100px; margin: 10px auto; }

<div class="css_genel">
  <div class="css_margin_2">Lorem ipsum accusata necessitatibus ut sea, usu pericula principes cu, habeo adhuc ei eam</div>
</div>

Burada içteki yeşil div kenarlardan eşit uzaklıkta bulunmaktadır, yani div ortalanmıştır. Eğer içeriği sağa yaslamayı düşünürsek sol taraftaki boşluk otomatik, sağ boşluk sıfır olacağından aşağıdaki kodu yazabiliriz.

  .css_margin_3 { width: 100px; margin: 10px 0px 10px auto; }
</style>

<div class="css_genel">
  <div class="css_margin_3">Lorem ipsum accusata necessitatibus ut sea, usu pericula principes cu, habeo adhuc ei eam</div>
</div>

Padding ve margin ile ilgili bahsedeceklerim bu kadar. Umarım bu makale faydalı olmuştur.