Merhaba..
CSS'in sayfadaki tüm elemanları bir kutu gibi gördüğünden daha önce bahsetmiştim Kutular için bir çok özellik tanımlanabiliyor. Elemanın kenarları ile içindekiler arasındaki boşluk miktarlarını ayarlamamızı sağlayan PADDING özelliğide bunlardan biridir.
PADDING
Bir elemanın iç boşluklarıdır. Yada yukarıda beliritildiği igibi , elamanın kenarları ile içindekiler arasındaki mesafelerdir. Css ile bu boşluklar tümden PADDING özelliği ile tanımlanabileceği gibi ,
- PADDING (tüm kenar iç boşlukları)
- PADDING -TOP (üst kenar iç boşluğu)
- PADDING -RIGHT (sağ kenar iç boşluğu)
- PADDING-BOTTOM (alt kenar iç boşluğu)
- PADDING -LEFT (sol kenar iç boşluğu)
şeklinde ayrı ayrı da tanımlanabilir..
GENEL KULLANIM
.icerik {
padding:50px; // tüm kenar iç boşluğu 50 px olur..
padding-top:50px; // üst kenar iç boşluğu50 px olur..
padding-right:50px; // sağ kenar iç boşluğu50 px olur..
padding-bottom:50px; // alt kenar iç boşluğu50 px olur..
padding-left:50px; // sol kenar iç boşluğu 50 px olur..
}
EKRAN
Yukarıdaki .kutu classlı (turuncu) DIV'in tüm iç kenarlarında 50px boşluk bırakır. Yani turuncu div içeriği , turuncu div kenarlarından 50px mesafeli olur. Turuncu div'in belirli bir genişliği olduğundan , içerik kutusu ile sağ kenar arasındaki padding boşluğu tanımlanan değere göre ayarlanamz...
PADDING KISALTMALARI
Padding değerleri farklı kenarlar için verilirken , yukarıda tanımlandığı gibi , ayrı ayrı yazıılabileceği gibi , kısaltmalarlada belirtilebilir..
4'LÜ GÖSTERİM
Padding ile tüm kenar iç boşuklarını aynı anda yazılabilir. Bunun için saat yönü sıralaması kullanılır:
1. değer üst
2. değer sağ
3. değer alt
4. değer sol
iç boşlukları ayarlar..
div {
padding: 15px 20px 25px 30px;
// Yukarıdaki tanım aşağıdaki tanımları tek satırda yapmış olur.
padding-top:15px;
padding-right:20px;
padding-bottom:25px;
padding-left:30px;
}
Yukarıdaki tanımlamaya göre , belirtilen div'in üst kenar iç boşluğu 15 , sağ kenar iç boşluğu 20 , alt kenar iç boşluğu 25 , sol kenar iç boşluğuda 30px olur:
3'LÜ GÖSTERİM
PAdding ile 3lü tanımlamada yine saat yönü sıralaması kullanılır: Ancak 4'lü gösterimden farklı olarak 2. değer hem sol hem sağ kenar iç boşluğunu ayarlar..
1. değer üst
2. değer sol ve sağ
3. değer alt
boşlukları ayarlar..
div {
padding: 15px 20px 25px;
// Yukarıdaki tanım aşağıdaki tanımları tek satırda yapmış olur.
padding-top:15px;
padding-right:20px;
padding-bottom:25px;
padding-left: 20px
}
Yukarıdaki tanımlamaya göre , belirtilen div'in üst kenar iç boşluğu 15 , sağ ve sol kenar iç boşlukları 20px , alt kenar iç boşluğu 25px olur..
2'Lİ GÖSTERİM
Padding ile 2'li tanımlamada ilk değer üst ve alt boşluğu ayarlarken, ikinci değer sol ve sağ iç boşluğu ayarlar..
1. değer üst ve alt
2. değer sol ve sağ
boşlukları ayarlar..
div {
padding: 15px 20px;
// Yukarıdaki tanım aşağıdaki tanımları tek satırda yapmış olur.
padding-top:15px; padding-bottom:15px;
padding-left: 20px; padding-right:20px;
}
Yukarıdaki tanımlamaya göre , belirtilen div'in üst ve alt kenar iç boşluğu 15 , sağ ve sol kenar iç boşlukları 20px olur..
Görüşmek Üzere...
