Padding, tanımlanmış herhangi bir sınırın içinde bir öğenin içeriğinin etrafında boşluk oluşturmak için kullanılır.
CSS ile padding üzerinde tam kontrole sahip olursunuz. Bir öğenin her bir tarafı için (üst, sağ, alt ve sol) padding’i ayarlamak için özellikler vardır.
Padding – Tek Taraflar
CSS, bir öğenin her bir tarafı için padding belirtme özelliklerine sahiptir:
padding-top
padding-right
padding-bottom
padding-left
Tüm padding özellikleri aşağıdaki değerlere sahip olabilir:
- uzunluk – px, pt, cm, vb. cinsinden bir padding belirtir.
- % – içeren öğenin genişliğinin% ‘si olarak bir padding belirtir
- inherit – padding’in üst öğeden miras alınması gerektiğini belirtir
Not: Negatif değerlere izin verilmez.
Örnek:
div {
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
Padding – Kısakod Özelliği
Kodu kısaltmak için tüm padding özelliklerini tek bir özellikte belirtmek mümkündür.
padding
Özelliği aşağıdaki padding özellikleri için kullanılan bir kestirme niteliktir:
padding-top
padding-right
padding-bottom
padding-left
Öyleyse, şu şekilde çalışır:
padding
dört değer alır:
- padding: 25px 50px 75px 100px;
- üst boşluk 25 pikseldir
- sağ boşluk 50 pikseldir
- alt boşluk 75 pikseldir
- sol boşluk 100 pikseldir
div {
padding: 25px 50px 75px 100px;
}
Eğer padding
özelliğinde üç değer varsa:
- padding: 25px 50px 75px;
- üst boşluk 25 pikseldir
- sağ ve sol boşluklar 50 pikseldir
- alt boşluk 75 pikseldir
div {
padding: 25px 50px 75px;
}
Eğer padding
özellik iki değer vardır:
- padding: 25px 50px;
- üst ve alt boşluklar 25 pikseldir
- sağ ve sol boşluklar 50 pikseldir
div {
padding: 25px 50px;
}
Eğer padding
özelliğinde bir değer varsa:
- Padding: 25px;
- dört boşluğun tümü 25 pikseldir
div {
padding: 25px;
}
Padding ve Öğe Genişliği
CSS width
özelliği, öğenin içerik alanının genişliğini belirtir. İçerik alanı, bir öğenin padding’i, kenarlığı ve kenar boşluğu içindeki kısımdır .
Bu nedenle, bir öğe belirli bir genişliğe sahipse, o öğeye eklenen padding, öğenin toplam genişliğine eklenecektir. Bu genellikle istenmeyen bir sonuçtur.
div {
width: 300px;
padding: 25px;
}
Burada <div> öğesine 300 piksellik bir genişlik verilir. Bununla birlikte, <div> öğesinin gerçek genişliği 350 piksel olacaktır (300 piksel + 25 piksel sol padding+ 25 piksel sağ padding)
Genişliği 300 pikselde tutmak için, padding miktarı ne olursa olsun box-sizing
özelliği kullanabilirsiniz . Bu, elemanın genişliğini korumasına neden olur; padding’i artırırsanız, mevcut içerik alanı azalacaktır.
div {
width: 300px;
padding: 25px;
box-sizing: border-box;
}