paddingCSS özelliği tanımlanmış herhangi bir kenar ve / veya sınırlar içinde, bir elemanın içeriğinin yaklaşık alan yaratarak, kutu modelinin en iç kısmı tanımlar.
Dolgu değerleri uzunluklar veya yüzdeler kullanılarak ayarlanır ve negatif değerleri kabul edemez. Tüm dolgu özellikleri için ilk veya varsayılan değer 0.
İşte basit bir örnek:
.box ( padding: 0 1.5em 0 1.5em; )Yukarıdaki örnek padding, burada gösterilen en fazla dört değeri kabul eden steno özelliğini kullanıyor :
.box ( padding: || || || )Dörtten az değer ayarlanırsa, eksik değerler tanımlananlar temel alınarak varsayılır. Örneğin, aşağıdaki iki kural kümesi aynı sonuçları alacaktır:
.box ( padding: 0 1.5em; ) .box ( padding: 0 1.5em 0 1.5em; )Bu nedenle, yalnızca bir değer tanımlanırsa, bu dört dolgu özelliğinin tümünü aynı değere ayarlar:
.box ( padding: 20px; )Üç değer bildirilmişse, öyledir padding: (top) (left-and-right) (bottom);.
Tek tek dolgu özelliklerinden herhangi biri, uzun el kullanılarak bildirilebilir, bu durumda özellik başına yalnızca bir değer tanımlamanız gerekir. Dolayısıyla, önceki örnek aşağıdaki gibi yeniden yazılabilir:
.box ( padding-top: 20px; padding-right: 20px; padding-bottom: 20px; padding-left: 20px; )Dolgu ve Öğe Genişliği Hesaplamaları
Bir öğenin belirli bir genişliği varsa, o öğeye eklenen herhangi bir dolgu öğenin toplam genişliğine eklenir. Dolgu her ayarlandığında bir öğenin genişliğinin yeniden hesaplanmasını gerektirdiğinden, bu genellikle istenmeyen bir sonuçtur. (Bunun yükseklik için de olduğunu unutmayın, ancak çoğu durumda bir elemana belirli bir yükseklik verilmemesi tercih edilir.)
Örneğin:
.box ( padding: 20px; width: 400px; )Bu örnekte, .boxöğeye 400 piksellik açık bir genişlik verilmesine rağmen, öğenin sayfadaki gerçek oluşturulmuş genişliği 440 piksel olacaktır. Bu sadece 400 piksel genişliğini değil, aynı zamanda 20 piksellik sol ve 20 piksellik sağ dolguyu da hesaba katar (önceki örnekte dolgu kısaltmasıyla tanımlanmıştır).
Bu, toplam öğe genişliğinin 400px'i yerine 400px içerik alanını korumak için gerçekleşir. İşte bunu gösteren bir Kalem:
Bu, kullanımdaki tüm tarayıcılarda standartlar modunda gerçekleşir, ancak IE6 ve IE7'de tuhaf modda (yani, IE6 veya IE7'de görüntülenen, belge türünün bildirilmediği sayfalarda veya tuhaflıkları tetiklemek için başka bir şeyin olduğu yerlerde meydana gelmez. modu).
Bu sorunu çözmek, böylece dolgu miktarı ne olursa olsun genişliği 400 pikselde tutmak için box-sizingözelliği kullanabilirsiniz :
.box ( padding: 20px; width: 400px; box-sizing: border-box; )Bu, dolguyu artırırken öğenin genişliğini korumasına ve dolayısıyla mevcut içerik alanını azaltmasına neden olur. İşte bir gösteri:
Tarayıcı Desteği
| Krom | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Evet | Evet | Evet | Evet | Evet | Evet | Evet |