Popüler Aramalar:  TLS Nedir?  MyBB SSL Ayarları  MyBB 1.8 Linkleri Gizleme Eklentisi  Wordpress LiteSpeed Cache Ayarları  Wordpress Eklentisiz Breadcrumb  Yandex Webmaster
CSS Dersleri 7: Padding Kullanımı

CSS Dersleri 7: Padding Kullanımı

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ı:

.paddingornegi {

padding: 10px 5px 10px 5px;

}

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

 Yazı Bağlantısını Kopyala & Paylaş

Benzer Yazılar

  • En Popüler 5 CSS Kütüphanesi 2019

    En Popüler 5 CSS Kütüphanesi 2019

    Web geliştiricileri olarak işimizi büyük ölçüde kolaylaştıran CSS kütüphaneleri mevcut. CSS3 teknolojisinin ortaya çıkmasıyla kazanılan kolaylıklar bu CSS kütüphanelerinin artmasını sağladı. Kütüphanelerin çeşidi ve sayısı artıkça arayüz ya da bir değiş ile ön yüz geliştiricilerin işi bir hayli kolaylaştı. Projelerinizi çok daha etkin ve kolay yönetebilmenizi, efekt verebilmenizi sağlayan bu…
  • Sık Kullanılan CSS Ölçü Birimleri

    Sık Kullanılan CSS Ölçü Birimleri

    Yaklaşık 2 hafta önce bir start-up projesinde front end developer olarak işe başladım. Bu başladığım yeni proje tamamen özel yazılmış bir yazılım olduğu için tasarım yapısını, kodlama yapısını çözmem zamanımı aldı. Bir web arayüzü geliştiricisi için CSS'de ki "px" değeri can damarıdır tasarımın. Oluşturulmuş bir yapıyı alıp, ete kemiğe büründüren…
  • CSS Dersleri 10: CSS’de Font Özellikleri ve Kullanımı

    CSS Dersleri 10: CSS’de Font Özellikleri ve Kullanımı

    Selamlar, Daha önce ki CSS ders yazımda CSS'in text özelliğini, yazı özelliğini anlatmıştım. Önceki dersimizde yazılara biçim vermiştik, işte üstü çizili,altı çizili gibi bir takım text özellikleri anlatmıştım. Bu yazımda ise CSS'de Font Özellikleri ve Kullanımı anlatacağım. Daha önce ki css derslerim için buraya tıklayınız. CSS, font özellikleri metinlerin yazı tipi,kalınlık,boyut gibi…
  • CSS Dersleri 9: CSS’de Text (Metin) Özellikleri

    CSS Dersleri 9: CSS’de Text (Metin) Özellikleri

    Selamlar, Daha önce ki CSS yazımda sizlere width ve height değerlerinin kullanımını göstermiştim. Bu yazımda ise CSS'de Text (Metin) Özellikleri konusunu anlatacağım. Yazı olmadan bir website olmaz arkadaşlar, yazılar websitelerin yapı taşlarından bir tanesi ama önemli olan bir yapı taşıdır. Bu yüzden websitelerimizi hazırlerken dikkat etmemiz gereken husus text (metin)'lerdir.…
CSS Dersleri 7: Padding Kullanımı için Yorum'da Bulun

Bu yazıya şimdiye kadar 1 Yorum yapılmıştır.

  • Yorum Sahibi
     Yanıtla
    Okan Türkoğlu Ziyaretçi

    Ç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

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

 Lütfen, en az 15 karakterli bir yorum belirtiniz.

 Lütfen,isminizi belirtiniz.
 Lütfen, kullanmakta olduğunuz bir e-mail adresi giriniz.
 Yukarıda ki alanı işaretlemeniz zorunludur.Aksi takdirde yorumunuz gönderilemeyecektir.