Top

CSS Dersleri Bölüm 13 Padding

CSS Dersleri Bölüm 13 Padding

Not: Bu içerik ve içerikler dizisi, Css’in doğru kaynaklardan öğrenilmesi ve Türkçe kaynak sıkınıtısının giderilmesi adına w3schools’tan çevirilmiştir. Online yani çevrimiçi editör de w3schools’a aittir. Herhangi bir sorunuz için aşağıya yazabilirsiniz!

Padding

Element ve elementin içeriği arasındaki boşlukları ifade eder padding.


Padding

Bir elementin içeriğinin etrafının temizlenmesini sağlar. Elementin arkaplan renginden etkilenir.

Farklı özellikler kullanarak, alt, üst, sağ sol farklı olarak ayarlanabilir. Tüm özelliklerin yazımı yerine kısayazım özelliği ile de belirlenebilir tüm çevre.

Mümkün olan değerler

Değer Tanım
length Sabit bir iç boşluk (in pixels, pt, em, etc.)
% Elementin yüzdesel boşlukları

 


Padding – Tekil kenarlar

CSS’te, farklı kenarlara farklı iç boşluklar verilebilir:

Örneğin

padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;

Kendiniz de deneyebilirsiniz»

 


Padding – Kısayazım özelliği

Kodu kısaltmak için,tek bir özellikte tüm değerler verilebilir. Bu kısayazım özelliğidir.

“padding” İç bşoluklar için kısayazım özelliği taşıyan özelliktir:

Örneğin

padding:25px 50px;

Kendiniz deneyin »

Padding  özelliği birden dörde kadar değer alabilir.

  • padding:25px 50px 75px 100px;
    • üst boşluk 25px
    • sağ boşluk 50px
    • alt boşluk 75px
    • sol boşluk 100px
  • padding:25px 50px 75px;
    • üst boşluk 25px
    • sağ ve sol boşluk 50px
    • alt boşluk 75px
  • padding:25px 50px;
    • üst ve alt boşluk 25px
    • sağ ve sol boşluk 50px
  • padding:25px;
    • tüm boşluklar 25px

Uygulamalar

Tek bildirimde tüm padding özellikleri
Dört değer ile beraber,  tüm iç boşluk kısayazım uygulamaları

Sol iç boşluğu ayarlama
Sol iç boşluğun nasıl ayarlanacağı

Sağ iç boşluk ayarlama
Sağ iç boşluğun nasıl ayarlanacağı

Üst boşluğu ayarlama
Üst boşluğun nasıl ayarlanacağı

Alt boşluğun ayarlanması 
Alt boşluğun nasıl ayarlanacağı


Css Padding Özelliklerinin Tümü

Özellik Tanım
padding Tek bildirimde kısayazım
padding-bottom Alt iç boşluk
padding-left sol iç boşluk
padding-right Sağ iç boşluk
padding-top Üst iç boşluk

Siz neler düşünüyorsunuz? Yazımızı beğendiyseniz aşağıdaki butonlardan tavsiye edebilirsiniz, paylaşabilirsiniz veya yorumlarınızı sunabilirsiniz. Teşekkürler okuduğunuz için!

Bir önceki yazımız olan CSS Dersleri Bölüm 12 - Margin başlıklı makalemizde Bölüm, bottom ve css hakkında bilgiler verilmektedir. Daha fazla yazımızı görmek için HYTürkyılmaz Dijital pazarlama ve growth hacking blogu anasayfası'yı ziyaret edebilirsiniz. Yazımızı aşağıdaki paylaşım butonlarıyla paylaşarak sevginizi yayınız! Teşekkürler!

Hasan Yasin Türkyılmaz

Sosyolog, dijital stratejist. Dijital medya, reklam ve growth hacking eğitimleri ve hizmetleri sunarım. PC, konsol fark etmez. Oyun oynamayı severim.

Tüm yazıları - Websitesi

Beni takip edin!:
TwitterFacebookLinkedInPinterestGoogle PlusDiggFlickrStumbleUponYouTubeYelpRedditDelicious