Takip Edin

CSS

CSS Padding (İç Boşluk) Özelliği

CSS padding özelliği, bir elemanın kenarlığını içeriğinden ayırarak dolgu alanı oluşturmanızı sağlar.

Not: padding özelliği, bir elemanın içinde ekstra boşluk oluştururken margin özelliği, bir elemanın etrafında ekstra boşluk oluşturur.

Her Kenar İçin İç Boşluk Tanımlama

Aşağıdaki özelliklerin yardımıyla bir elemanın her kenarı için iç boşluk ayarlaması yapabilirsiniz:

  • padding-right
  • padding-bottom
  • padding-left
  • padding-top

Tüm padding özellikleri aşağıdaki değerlere sahip olabilir:

length: İç boşluğu px, pt, cm vb. cinsinden belirtmek için kullanılır.

%: İç boşluğu, içerdiği elemanın genişliğinin %’si cinsinden belirtmek için kullanılır.

inherit: İç boşluğun üst elemandan miras alınması gerektiğini belirtmek için kullanılır.

Not: padding özelliğinde negatif değerler geçersizdir.

İç Boşluk için Kısa Gösterim Özelliği

padding özelliği,

  • padding-top,
  • padding-right,
  • padding-bottom,
  • padding-left

özelliklerini, kodu kısaltmak adına tek bir özellikte belirtmeyi mümkün kılar.

Eğer padding özelliği, 4 değere sahipse

padding: 10px 20px 30px 40px;

  • Üst iç boşluğun 10px değere sahip olduğunu,
  • Sağ iç boşluğun 20px değere sahip olduğunu,
  • Alt iç boşluğun 30px değere sahip olduğunu,
  • Sol iç boşluğun 40px değere sahip olduğunu belirtir.

Eğer padding özelliği, 3 değere sahipse

padding: 10px 20px 30px;

  • Üst iç boşluğun 10px değere sahip olduğunu,
  • Sağ ve sol iç boşlukların 20px değere sahip olduklarını,
  • Alt iç boşluğun 30px değere sahip olduğunu belirtir.

Eğer padding özelliği, 2 değere sahipse

padding: 10px 20px;

  • Üst ve alt iç boşlukların 10px değere sahip olduğunu,
  • Sağ ve sol iç boşlukların 20px değere sahip olduğunu belirtir.

Eğer padding özelliği, 1 değere sahipse

padding: 10px;

  • Tüm iç boşlukların 10px değere sahip olduğunu belirtir.

İç Boşluk ve Elemanın Genişliği

CSS width özelliği, bir elemanın içerik alanının genişliğini belirtir. Bir elemanın içerik alanı, o elemanın kenar boşluğu, kenarlığı ve iç boşluğunun içerisindeki kısımdır.

Buradan yola çıkarak eğer bir elemanın belirli bir genişliği varsa bu elemana eklenecek iç boşluk değeri, elemanın toplam genişliğine eklenecektir. Bu ise genellikle istenmeyen bir sonuçtur.

Yukarıdaki örnekte two sınıfına sahip elemana 20 px iç boşluk değeri verildiğinde genişliği 240 px’e yükselmiştir. Bu elemanın genişliğini 200px’de tutmak için box-sizing özelliği kullanılabilir. Bu özellik sayesinde elemanın padding değerini artırsanız dahi mevcut içerik alanı azalacak ancak genişlik değeri 200 px olarak kalmaya devam edecektir.

Devamını oku

Popüler

error: Content is protected !!