CSS Dersleri - Div Özellikleri

Bir Önceki Dersimizde CSS Font Özelliklerini Anlatmıştım. Bugün İse Div Özelliklerini Anlatacağım. Bir Önceki Dersimize Buradan Ulaşabilirsiniz.

CSS Div Özellikleri

Tablosuz tasarımların gereklilik kazandığı günümüzde, bu iş için esas etiketimiz olan “<div>” 

etiketi, kutu modeli (box model) oluştururken de esas etiket konumundadır. 

Kutu modeli şu üç ana ögeden oluşur; 

• margin (kenar dışı boşluğu) 
• border (kenar kalınlığı) 
• padding (kenar içi boşluğu) 

Kenar Dışı(Margin) Boşluğu Özellikleri

Turuncu renk ile sınırları belli olan kutumuzun diğer ögelerle arasındaki mesafeyi belirleyen "margin‟ ögesinin alt elemanları şunlardır;

• margin-top (üst kenar dışı boşluğu)
• margin-right (sağ kenar dışı boşluğu)
• margin-bottom (alt kenar dışı boşluğu)
• margin-left (sol kenar dışı boşluğu)
• margin (kenar dışı boşlukları) (Kısaltma amaçlı kullanılır.)

body {

margin-right: 50px

} 

sayfamızın sağ kenar dışı boşluğunu 50 px yapar. 

Kenar Çizgisi(Border) Özellikleri

Kenar çizgisi özellikleri ile kenar çizgisinin biçemini, rengini ve kalınlığını ayarlanabilir. Tüm kenarlara veya ayrı ayrı her kenara bu ayarları uygulayabiliriz. Bu özellikler Ģunlardır;

border-style (kenar çizgisi biçemi)

• border-top-style (üst kenar çizgisi biçemi)
•  border-right-style (sağ kenar çizgisi biçemi) 
• border-bottom-style (alt kenar çizgisi biçemi) 
• border-left-style (sol kenar çizgisi biçemi) 

border-width (kenar çizgisi genişliği-kalınlığı) 

• border-top-width (üst kenar çizgisi genişliği)
• border-right-width (sağ kenar çizgisi genişliği) 
• border-bottom-width (alt kenar çizgisi genişliği) 
• border-left-width (sol kenar çizgisi genişliği) 

border-color (kenar çizgisi rengi) 

• border-top-color (üst kenar çizgisi rengi) 
• border-right-color (sağ kenar çizgisi rengi) 
• border-bottom-color (alt kenar çizgisi rengi) 
• border-left-color (sol kenar çizgisi rengi) 

border (Kısaltma işlemleri için kullanılır.)

Kenar Çizgisi(Border) Biçimleri

Kenar İçi(Padding) Boşluğu Özellikleri

Kutu modeli resmimizden hatırlayacağınız gibi; kenar çizgileri turuncu renk ile gösterilen kutumuzda, kenar çizgileri ile içerik arasındaki mesafeyi ayarlamaya yarayan “padding” ögesinin alt elemanları şunlardır; 

• padding-top (üst kenar içi boşluğu)
• padding-right (sağ kenar içi boşluğu) 
• padding-bottom (alt kenar içi boşluğu) 
• padding-left (sol kenar içi boşluğu) 
• padding (kenar içi boşlukları) (Kısaltma amaçlı kullanılır.)  

Anahtar Kelimeler: bilgi, bilgi tohumu, border, CSS, CSS Dersleri - Div Özellikleri, margin, padding, tohumu