CSS Kutu özelliklerini kullanma - PcTekno.NET | PTN

Konumunuz:

CSS Kutu özelliklerini kullanma

Cuma, 04 Mayıs 2007

Kutu özelliklerini kullanma

Bir blok elemanın kenarlara göre uzaklıkları/marj ( margin ) , çerçeve değerleri, içkenarlara olan uzaklıkları ( padding ) gibi değerlerin ayarlandığı özellikleri bu bölümde göreceğiz.

marj özellikleri

Tüm elemanlara uygulanabilen margin özelliği bir elemanın yan kenarlara olan uzaklığını belirlemekte kullanılır, uzunluk ve yüzdelik değerler alabilir. margin-top elemanın üst kenarının bir önceki elemandan ne kadar uzaktan başlayacağını belirler. Verilen değer kadar üsteki elemandan aşağıda ( eksi değerlerde yukarıdan ) elemanı başlatır.

margin-right elemanın sağındaki elemana olan uzaklığını ayarlar. Verilen değer kadarlık bir mesafe sağdaki eleman ile arasında olacaktır.
margin-bottom elemanın altaki elemana olan uzaklığını ayarlar.
margin-left elemanın soldaki eleman olan uzaklığını ayarlar. Yani eleman soldaki elemandan verilen değer kadar bir uzaklıktan başlayacaktır.
margin tüm margin değerlerinin bir seferde verilmesi için kısayol sunar. Alacağı dört değer sırasıyla üst, sağ, alt ve soldur ( saat yönünde bir sıralama ). Kullanılmayan özellikler için varsayılan değerler kullanılır.

 
P { margin : 10,5,10,5;}
DIV { 
  margin-left: 30;
  margin-right:20;
     }
BODY {  margin: 0 0 0 0;}

Bu paragrafta margin özellikleri ayarlanmıştır. Paragrafı incelediğinizde yan kenarlara, üsteki paragrafa ve alttaki başlığa belli mesafelerin atandığı görülebilir. Sonucun daha iyi anlaşılabilmesi için zemin rengi ve font rengi değiştirildi.

içkenar uzaklıkları / padding

Elemanın kendi kenarlarına ( çerçevesine ) olan uzaklığını belirleyen özelliklerdir. Verilen değerler kada kenarlardan içeride gösterme işlemi yapılacaktır. Değer olarak uzunluk ve yüzdelik alabilir.

padding-top üst çerçeve kenarına olan uzaklığı belirler.
padding-right sağ çerçeve kenarına olan uzaklığı belirler.
padding-bottom alt çerçeve kenarına olan uzaklığı belirler.
padding-left sol çerçeve kenarına olan uzaklığı belirler.
padding tüm kenarlar için kısayol yazımı sunar. Sırasıyla üst, sağ, alt ve sol değerleri alır. Kullanılmayan kenar bilgileri için varsayılan değerler kullanılır.

 
P { padding-left : 30; }
DIV { 
  padding-left:30;
  pading-top:20;
     }

Bu örneğimizde padding değerleri 20 40 20 40 olarak ayarlandı. Sonucun daha iyi anlaşılabilmesi için elemana bir çerçeve çizildi. Değerlerin çerçeveden ne kadar uzakta olduğuna bakarak sonucu daha iyi bir şekilde görebilirsiniz.

Yorumlar (0) Add Comment