CSS Padding ile İç Boşluk Ayarlama – Tasarım Kodlama
CSS

CSS Padding ile İç Boşluk Ayarlama

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:

 

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 >> Üst
  • padding-right >> Sağ
  • padding-bottom >> Alt
  • padding-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:

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,

div öğesine 300px’lik bir genişlik veriliyor. Ancak, div öğesinin gerçek işlenen genişliği 350px olacaktır. (300px + 25px sol padding + 25px sağ padding):
Örnek:

 

Yorum bırak