Önceki yazıda birazda olsa css in bir html elemanına nasıl baktığını gördük. Şimdide bu bakışın tanımlamalarını yazarak örneklendirelim.

PADDİNG (kenar içi boşluk): Genel olarak şu tanımlamaları alır.

• Üst kenar içi boslugu(padding-top)
• Sag kenar içi boslugu (padding-right)
• Alt kenar içi boslugu (padding-bottom)
• Sol kenar içi boslugu (padding-left)
• Kenar içi boslugu (padding)

sadece padding {2em;} diye tanımlanırsa tüm özellikleri aynı anda 2 em olarak kullanır.

veya kısa olarak

padding{2em 4em 3em 1em;} diye tanımlanarak 4 özellik atanmış olur. Aslında tüm tanımlamalar için genel özelik ataması şu şekilde işler.

Eğer tek bir değer belirtilmişse, bu değer tüm kenarlara uygulanır.
İki değer belirtilmişse, ilk değer alt ve üst kenarların, ikinci değer ise sol ve sağ
kenarların iç boşluk genişlikleri olarak ele alınır.
Üç değer belirtilmişse,
birinci üst kenarın, ikinci sol ve sağ kenarın, üçüncü ise alt kenarıniç boşluk genişliği
için belirtilmiş sayılır.
Eğer dört değer belirtilmişse bunlar sırayla üst, sağ, alt ve sol kenar iç boşluk
genişlikleri olarak ele alınır.

Bunu tüm tanımlamalar için düşünebiliriz.

padding ve margin de tüm uzunluk değerlerini kullanabiliriz. (px,in,em,ex..)

MARGİN(kenardışı boşluğu). aynen padding teki gibi değerler alır. aşağıdaki bir örnekteki gibi.

  margin-top: 1em;

  margin-right: 2em;

  margin-bottom: 3em;

  margin-left: 2em;

BORDER(kenar çizgisi): YAZININ TAMAMINA BAK »
				

                

                    

						Henüz Konuşma Yok                    
                    

                    	                       
                    
                
			

CSS html elemanlarına(<p>,<h1>…) bakarken onları bir kutu içindeymiş gibi algılar.Yani bir paragrafımız olsun; css le paragrafa müdahale ederken, css paragrafa bir kenar çizgisi ekler (bu değer ‘0′ sa görünmez) yani border. border ile paragraf arasındaki alan kenar içi boşluğudur (padding).padding uzunluk değeri aldıkça boşluk büyür. Diğer bir boşluk border ile yani çerçeve ile diğer nesneler arasındaki boşluktur.Yani kenardışı boşluk (margin). Margin bir paragraf içindeki bir resmin , paragrafa yakınlık uzaklık değerini tanımlar.Biraz karışık bir durum gibi görülüyor ama aşağıdaki resme bakarak daha iyi anlayabiliriz.

Kenar iç boşluk alanının yüzey rengi veya resmi background niteliği ile belirtilir.
background{color:red;} gibi.

Bir örnekle daha iyi açıklayalım.

      li.cizgili {          /* LI için kenar çizgileri */
        border-style: dashed;  /* Kesik çizgili */
        border-width: medium;  /* Orta kalınlıkta */
        border-color: lime;    /* Açık yeşil renkte */
        background:#bb55cc;    /*mor renkte kenar içi boşluk*/
      }

Bu paragraf orta kalınlıkta kesik çigili ve yeşil renkte
border içerir.


Bu kodun görüntüsü şu şekildedir;
 
Genel olarak tanım bu şekildedir. yani kenar içi boşluk(padding),
kenar çizgisi(border) ve
kenar dışı boşluk(margin). Bu üç özelliğin tanımlamaları farklı farklıdır.
Örneğin border için;
kenar çizgisi tipi border-style, kenar çizgisi genişliği border-width ,
kenar çizgisi rengi border-color tanımlanabilir.
 Bu tanımlamarıda diğer yazımda vermek istiyorum.