CSS Dolgusu
Doldurma, bir öğenin içeriğinin çevresinde, tanımlanmış sınırların içinde boşluk oluşturmak için kullanılır.
CSS Dolgusu
CSS paddingözellikleri, bir öğenin içeriğinin çevresinde, tanımlanmış herhangi bir sınırların içinde boşluk oluşturmak için kullanılır.
CSS ile dolgu üzerinde tam kontrole sahipsiniz. Bir elemanın her bir tarafı (üst, sağ, alt ve sol) için dolguyu ayarlamak için özellikler vardır.
Dolgu - Bireysel Taraflar
CSS, bir öğenin her bir tarafı için dolguyu belirtmek için özelliklere sahiptir:
padding-toppadding-rightpadding-bottompadding-left
Tüm dolgu özellikleri aşağıdaki değerlere sahip olabilir:
- uzunluk - px, pt, cm, vb. cinsinden bir dolgu belirtir.
- % - içeren öğenin genişliğinin %'si olarak bir dolgu belirtir
- devral - dolgunun üst öğeden devralınması gerektiğini belirtir
Not: Negatif değerlere izin verilmez.
Örnek
Bir <div> öğesinin dört tarafı için farklı dolgu ayarlayın:
div {
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
Dolgu - Steno Özellik
Kodu kısaltmak için tüm padding özelliklerini tek bir özellikte belirtmek mümkündür.
Özellik padding, aşağıdaki bireysel dolgu özellikleri için bir kestirme özelliktir:
padding-toppadding-rightpadding-bottompadding-left
İşte nasıl çalıştığı:
paddingÖzelliğin dört değeri varsa :
- dolgu: 25px 50px 75px 100px;
- üst dolgu 25 pikseldir
- sağ dolgu 50 pikseldir
- alt dolgu 75 pikseldir
- sol dolgu 100 pikseldir
Örnek
Doldurma stenografi özelliğini dört değerle kullanın:
div {
padding: 25px 50px 75px 100px;
}
paddingÖzelliğin üç değeri varsa :
- dolgu: 25px 50px 75px;
- üst dolgu 25 pikseldir
- sağ ve sol dolgular 50 pikseldir
- alt dolgu 75 pikseldir
Örnek
Doldurma stenografi özelliğini üç değerle kullanın:
div {
padding: 25px 50px 75px;
}
paddingÖzelliğin iki değeri varsa :
- dolgu: 25 piksel 50 piksel;
- üst ve alt dolgular 25 pikseldir
- sağ ve sol dolgular 50 pikseldir
Örnek
Doldurma stenografi özelliğini iki değerle kullanın:
div {
padding: 25px 50px;
}
paddingÖzelliğin bir değeri varsa :
- dolgu: 25 piksel;
- dört dolgunun tümü 25 pikseldir
Örnek
Doldurma stenografi özelliğini tek bir değerle kullanın:
div {
padding: 25px;
}
Dolgu ve Eleman Genişliği
CSS widthözelliği, öğenin içerik alanının genişliğini belirtir. İçerik alanı, bir öğenin ( kutu modeli ) dolgu, kenarlık ve kenar boşluğunun içindeki kısımdır .
Bu nedenle, bir öğenin belirli bir genişliği varsa, o öğeye eklenen dolgu, öğenin toplam genişliğine eklenecektir. Bu genellikle istenmeyen bir sonuçtur.
Örnek
Burada <div> elemanına 300 piksellik bir genişlik verilir. Ancak, <div> öğesinin gerçek genişliği 350 piksel olacaktır (300 piksel + 25 piksel sol dolgu + 25 piksel sağ dolgu):
div {
width: 300px;
padding: 25px;
}
Genişliği 300 pikselde tutmak için, dolgu miktarı ne olursa olsun
box-sizingözelliği kullanabilirsiniz. Bu, öğenin gerçek genişliğini korumasına neden olur; dolguyu artırırsanız, kullanılabilir içerik alanı azalır.
Örnek
Dolgu miktarı ne olursa olsun genişliği 300 pikselde tutmak için box-sizing özelliğini kullanın:
div {
width: 300px;
padding: 25px;
box-sizing: border-box;
}
Daha fazla örnek
Bu örnek, bir <p> öğesinin sol dolgusunun nasıl ayarlanacağını gösterir.
Bu örnek, bir <p> öğesinin doğru dolgusunun nasıl ayarlanacağını gösterir.
Bu örnek, bir <p> öğesinin üst dolgusunun nasıl ayarlanacağını gösterir.
Bu örnek, bir <p> öğesinin alt dolgusunun nasıl ayarlanacağını gösterir.
Tüm CSS Dolgu Özellikleri
| Property | Description |
|---|---|
| padding | A shorthand property for setting all the padding properties in one declaration |
| padding-bottom | Sets the bottom padding of an element |
| padding-left | Sets the left padding of an element |
| padding-right | Sets the right padding of an element |
| padding-top | Sets the top padding of an element |