Ege YOLBAŞI

CSS Padding Kullanımı

17th Ekim 0 okunma Yorum Yok

CSS kodlaması yaparken sayfa içerisinde boşluklar oluşturuyoruz ve bu boşlukları bir kısımını CSS Padding  özelliği ile oluşturuyoruz.CSS kodlaması yaparken en sık kullandığımız özelliklerden biri olan Padding tüm tarayıcılar ile uyumlu olup kullanımı ve uygulaması oldukça basittir.

Padding Nedir ?

Padding özelliği bir HTML elementinin iç kısmını genişletip belirtilen miktarda genişletip boşluk yaratır.

Dikkat Edilmesi Gereken En Önemli Nokta

Padding özelliğini kullandığımız bir elementin yükseklik ve genişlik oranını verdiğimiz padding değeri kadar düşürmeliyiz.

Bu düşürmeyi yapmadığımız zaman biz elementimize 80px yükseklik verdiğimizi varsayalım ve elementimize padding top 15px verdiğimiz zaman element yüksekliğimiz otomatik olarak 95px olacaktır (Çünkü padding değeri içten boşluk verir) ve buda sayfa içerisinde kötü bir görüntüye yol açacaktır.Bunun olmamaması için 80px olan element yüksliğmizi 65px yaparsak hiç bir sorun meydana gelmeyecektir.

Teori fazla mı geldi işte örneği.

See the Pen kkRwRO by Ege (@yolbasiege) on CodePen.0

Aldığı Değerler
  • padding-top: üst taraf ile olan mesafeyi ayarlar.
  • padding-right: sağ taraf ile olan mesafeyi ayarlar.
  • padding-bottom: alt taraf ile olan mesafeyi ayarlar.
  • padding-left: sol taraf ile olan mesafeyi ayarlar.
Kullanım İle İlgili Örnekler

Ben örneklerde ki değerleri “px” olarak verdim ancak siz bu değerleri ” auto, % ve cm olarak verebilirsiniz.

Sizde padding kullanımını daha iyi anlayabilmek için bol bol pratik yapmalısınız.Çünkü Padding CSS temelini oluşturur.

Yorum Yapmak İster Misin ?