Buradasin: Anasayfa › Dersler › Dreamweaver ›

CSS Dersleri-2 Margin ve Padding

01.01.2008

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.