CSS Dersleri 7: Padding Kullanımı

CSS Dersleri 7: Padding Kullanımı
Bu Yazıyı Değerlendir

Selamlar,

Daha önce ki CSS dersimde sizlere CSS’in Margin Özelliğini anlatmıştım, bu yazımda ise sizlere yine margin özelliğinin farklı bir şekli olan CSS’de Padding Kullanımı nı göstereceğim. Daha önce ki css ile ilgili ders yazılarıma aşağıda ki bağlantılar ile ulaşabilirsiniz.

CSS’de Padding Kullanımı

CSS ile bir web sayfası hazırlarken sayfa içerisinde bazı boşluklar oluşturuyoruz ve bu boşlukları bir kısmını CSS’in 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ı belirtilen miktarda genişletip ve yine belirtilen miktarda html elementi içerisinden belirtilen yön doğrultusunda boşluk yaratır.

Padding Kullanımı

[label style=”red”]Önemli:[/label]  Padding özelliğini kullandığımız html elementin yükseklik ve genişlik oranını verdiğimiz padding değeri kadar düşürmeliyiz.

Peki, neden bu düşürmeyi yapmalıyız ? Neden padding verdiğimiz bir html elementinin genişlik ve yükseklik değerlerini padding değeri kadar düşürmeliyiz. Açıklayayım size, bu düşürmeyi yapmadığımız zaman html elementimize verdiğimiz padding değerleri varolan yükseklik ve genişlik değerlerine eklenecektir. Yani, bir html elementinin yüksekliğini 90px olsun ve biz bu elemente birde padding değeri veriyoruz ve padding-top: 15px; vererek iç kısımdan yukarıya doğru bir boşluk yaratılmasını istedik haliyle 90px olan yükseliğimiz oldu size 105px haliyle html elementimizin istediğimizi boyutu bozulmuş oldu.

Peki, ne yapmak gerekiyor, yukarıda bahsettiğim şekilde eğer bir html elementine padding değeri verecekseniz ve padding değerinizin yönüne göre html elementinin genişlik ve yükseklik değerini padding değerine göre düşüreceksiniz. Yukarıda verdiğimiz örneği baz alarak 90px lik bir yüksekliğe sahip html elementine 15px lik bir padding top değeri veriyorsak 90px yükseklik oranını 75px olarak güncelleyeceğiz ve padding değerini verdiğimiz otomatik olarak yine 90px lik bir yükseklik elde etmiş olacağız.

Anlamadın mı ? Aşağıda ki örnek anlamanı sağlayacaktır.

 

See the Pen CSS’de Padding Kullanımı Örneği by Huseyin Korbalta (@huseyinkorbalta) on CodePen.

CSS Padding Özelliğinin Aldığı Değerler

Aynı CSS’in margin özelliğinin aldığı değerler gibi CSS’in padding özelliğide 4 tane değer almaktadır. Buda yine yer-yön belirtilerek alınan değerlerdir.

  • padding-top: Kullanıldığı html elementinin üst kısmıyla olan mesafeyi ayarlar.
  • padding-bottom: Kullanıldığı html elementinin alt kısmıyla olan mesafeyi ayarlar.,
  • padding-left: Kullanıldığı html elementinin sol kısmıyla olan mesafeyi ayarlar.
  • padding-right: Kullanıldığı html elementinin sağ kısmıyla olan mesafeyi ayarlar.

Diğer css özellikleri gibi padding özelliğide tek bir satırda bu değerlerin hepsini alabilir. Yani sadece padding: kısa yolunu kullanarak 4 tane alabildiği değerleri girebilirsiniz.

Örnek kullanımı:

CSS’in Padding Kullanımı konusunu iyi anlayabilmeniz için bol bol örnek yapmanız gerekmektedir. CSS’in Padding özelliği tabirim caizse CSS’in yapı taşlarından bir tanesidir.

Şimdilik benden bu  kadar kolay gelsin, iyi çalışmalar. Esen kalın.

esen-kalin

1 Yorum

  1. Çok teşekkür ederim, anlatımınız gerçekten çok iyi, hiç sıkılmadan ve anlayarak bu pdding olayını anladım sayende css yazılarının devamını bekliyorum

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir