CSS padding (iç boşluk) özellikleri, belirli bir sınırın içinde, bir öğenin içeriği etrafında boşluk oluşturmak için kullanılır.
CSS ile, paddding üzerinde tam kontrole sahipsiniz. Bir elemanın her iki tarafındaki iç boşluğu ayarlamak için özellikler vardır (üst, sağ, alt ve sol).
Örnek:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <!DOCTYPE html> <html> <head> <style> div { padding: 70px; border: 1px solid #4CAF50; } </style> </head> <body> <div>Bu elemana 70px padding( iç boşluk) verildi.</div> </body> </html> |
CSS bir öğenin üst,sağ,alt ve sol kısmına iç boşluk bırakmak için özelliklere sahiptir. Bunun için çeşitli yöntemler kullanılabilir.
padding-top >> Üstpadding-right >> Sağpadding-bottom >> Altpadding-left >> Sol
Yukarıda padding için verilen özellikler px,pt,cm,% gibi değerler alabilir.
Not: Padding için negatif değer kullanılmaz.
Örnek:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <!DOCTYPE html> <html> <head> <style> div { border: 1px solid black; background-color: lightblue; padding-top: 50px; padding-right: 30px; padding-bottom: 50px; padding-left: 80px; } </style> </head> <body> <div>Bu div elemanı, 50px'lik bir üst boşluğa, 30px'lik bir sağ boşluğa, 50px'lik bir alt boşluğa ve 80px'lik bir sol boşluğa sahiptir..</div> </body> </html> |
CSS Padding Yazım Şekilleri:
Üstteki örnektekinden farklı olarak bir öğeye aşağıdaki şekillerde de iç boşluk padding özelliği verilebilir.
padding:50px >> Bu şekilde bir yazımda öğenin üst, sağ, alt ve sol boşluğu 50px olarak ayarlanacaktır.
padding:50px 30px >> Öğenin üst ve alt boşluğu 50px, sol ve sağ boşluğu ise 30px olarak ayarlanacaktır.
padding: 30px 40px 20px >> Öğenin üst boşluğu 30px, sağ ve sol boşluğu 40px, alt boşluğu 20px olarak ayarlanacaktır.
padding:10px 20px 30px 40px >> Öğenin üst boşluğu 10px, sağ boşluğu 20px, alt boşluğu 30px ve sol boşluğu 40px olarak ayarlanacaktır.
CSS Padding ve Width
CSS genişliği özelliği, öğenin içerik alanının genişliğini belirtir. İçerik alanı, bir elemanın (kutu modeli) padding, border ve margin içindeki kısımdır.
Yani, eğer bir eleman belirtilen bir genişliğe sahipse, o elemente eklenen padding, elemanın toplam genişliğine eklenecektir. Bu genellikle istenmeyen bir sonuçtur.
Aşağıdaki örnekte,
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | <!DOCTYPE html> <html> <head> <style> div.ex1 { width: 300px; background-color: yellow; } div.ex2 { width: 300px; padding: 25px; background-color: lightblue; } </style> </head> <body> <h2>Padding ve width</h2> <div class="ex1">Bu div 300px genişliğindedir.</div> <br> <div class="ex2">Bu div 300px genişliğinde ayarlanmıştır. Fakat padding özelliği eklendiğinden genişliği 350px' e çıkmıştır.</div> </body> </html> |
1 Yorum