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
- 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;
}
İç 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;
}
CSS Kodu
.stilim
{
/* Açıklama: padding: [üst|alt] [sağ|sol] */
padding: 10px 20px;
}
Padding ve Margin'in farkı ile ilgili buradan bilgi alabilirsiniz.