CSS Dersleri-2 Margin ve Padding

01.01.2008
876 kere okundu, 0 yorum yazildi.


Margin
Elementlerin etrafındaki boşluk olarak tanımlanır. Hem katman(ID) hem de sınıf(CLASS) seçicilerine uygulanabilir.
Kullanım Biçimleri
                :: margin-left: Elementin sol tarafa olan uzaklığı,
                :: margin -right: Elementin sağ tarafa olan uzaklığı,
                :: margin -bottom: Elementin alt kısma olan uzaklığı,
                :: margin -top: Elementin üst kısma olan uzaklığını belirlemek için kullanılır.
                :: margin: ise tek bir seferde üstteki 4 tanımlamayı yapmanızı sağlar. Kısaca açıklamak gerekirse;
#birinci_ornek
{
margin: 10px 0px 0px 10px
}
Yukarıda yapılan tanımlamada sırayla, top-right-bottom-left değerleri girilmiştir.      
Padding
Element kenarlığı ve içeriği arasında kalan boşluk olarak tanımlanır. Hem katman(ID) hem de sınıf(CLASS) seçicilerine uygulanabilir.
Padding değerini bir katmana(ID) uyguladığınız zaman o katmanın içinde bulunan tüm elementler (tüm sınıflar…) bundan etkilenir ancak bir sınıfa uyguladığınızda sadece o sınıfı etkiler.  Aynı zamanda katmanın genişliği padding değeri kadar artar. Bununla ilgili örnek animasyonumuzda bulunmaktadır.
                Kullanım Biçimleri
                :: padding-left: İçeriğin sol kenarlığa olan uzaklığını,
                :: padding-right: İçeriğin sağ kenarlığa olan uzaklığı,
                :: padding-bottom: İçerik alt kenarlığa olan uzaklığı,
                :: padding-top: İçerik alanının üst kenarlığa olan uzaklığını belirlemek için kullanılır.
                :: padding: ise tek bir seferde üstteki 4 tanımlamayı yapmanızı sağlar. Kısaca açıklamak gerekirse;
.ikinci_ornek
{
padding: 10px 0px 0px 10px
}
Yukarıda yapılan tanımlamada sırayla, top-right-bottom-left değerleri girilmiştir.
Animasyonu İzleyelim
Animasyonumuzu izleyerek bu iki özelliğin nasıl kullanıldığını ve farklarının neler olduğunu öğrenin.
 
Yazan:
Burak Barbak
0.0
Toplam Oy Sayisi: 0
AddThis Social Bookmark Button
  • Yorumlar       
Yorum Bulunamadi!
  • Yorum Yaz       
Rumuz:

Guvenlik Kodu: 5-5 =
Yorumunuz:
[b] [/b] ile kalinlik, [i] [/i] ile yatiklik ve [u] [/u] ile alticizik kelimeler ekleyebilirsiniz.
Örnek ;[b]Blicca[/b] [i]Bilgi[/i] [u]Sitesi[/u]
Blicca ©
Bu Site Firefox Uyumlu Olarak Geliştirilmektedir.