CSS İçten Boşluk (Padding)

CSS Dersleri

• Ana Sayfa
• İletişim

CSS İçten Boşluk (Padding) padding özelliği bir HTML elementinin kenarlarının içinde bir boşluk yaratmamızı sağlar. Kenardan içerdeki bu boşlukları belirlerken üst, sol, alt ve sağ için ayrı ayrı belirlenebileceği gibi tek bir css koduyla da bunlar hızlıca belirlenebilir. Tüm padding komutları:

• padding - Hızlı kullanım
• padding-top - Üstten boşluk
• padding-right - Sağdan boşluk
• padding-bottom - Alttan boşluk
• padding-left - Soldan boşluk

Alabileceği değerler:

• genişlik belirtme - px, em, pt gibi ölçülerle genişliği belirtme
• yüzde kullanma (%) - İçerik genişliğine göre oranlar

Ayrı Ayrı İç Boşlukları Ayarlamak

Üst, sağ, alt ve sol boşlukları ayrı ayrı ayarlanabilir. Bunun için padding komutuna araya tire (-) koyarak ilgili yönün ingilizcesini yazıyoruz.

CSS Kodu

.stilim { padding-top: 10px; padding-bottom: 10px; padding-left: 20px; padding-right: 20px; } Yukarıdaki örnekte üst ve alt boşluklar içerden 10 piksel yüksekliğinde, sağ ve sol boşluklar içerden 20 piksel genişliğinde olacaktır.

İç Boşlukları Ayarlamanın Kısa Yolu

Sadece padding kullanarak hepsi için geçerli tek bir tane değer yazabildiğimiz gibi sırasıyla üst, sağ, alt, sol şeklinde değerler girerek de yukarıdaki dört kodun tamamını tek kodda yazabiliriz:

CSS Kodu

.stilim { /* Açıklama: padding: [üst] [sağ] [alt] [sol] */ padding: 10px 20px 10px 20px; } Yukarı ve alt değeri ile Sağ ve sol değeri aynı olan ifadelerde şu şekilde de kullanabileceğimizi unutmayalım:

CSS Kodu

.stilim { /* Açıklama: padding: [üst|alt] [sağ|sol] */ padding: 10px 20px; } Yazdığımız bu kod, bir önceki yazdığımız kod ile aynı işlevi görecektir. Padding ve Margin'in farkı ile ilgili buradan bilgi alabilirsiniz.

• CSS Dıştan Boşluk (Margin)
• CSS Gruplama ve Üzerine Yazma

Temel Bilgiler

CSS Nedir? CSS Kod Yapısı CSS ID ve Class Seçimi CSS Nasıl Eklenir?

CSS Stilleri

CSS Arkaplanlar CSS Yazılar CSS Yazı Tipleri CSS Bağlantılar CSS Listeleme CSS Tablolar

Kenarlıklar

CSS Kutu Modeli CSS Kenarlıklar (Border) CSS Dış Kenarlık (Outline) CSS Dıştan Boşluk (Margin) CSS İçten Boşluk (Padding)

CSS İleri Düzey

CSS Gruplama ve Üzerine Yazma CSS Sınırlamalar CSS Gösterme - Gizleme CSS Pozisyon Belirleme (position) CSS Kaydırma (float) CSS Hizalama (align) CSS Özel İfadeler (Pseudo) CSS Transparanlık (opacity) CSS Çıktı Türleri (media) CSS Özellik Seçimi (Attribute) CSS'ye Genel Bakış Facebook Sayfamız

Programlama Türkiye