CSS dolgu , CSS kutusu modelinin özelliklerinden biridir. Bu shorthand özelliği, bir HTML öğesinin dört tarafının etrafındaki dolguyu ayarlar. CSS dolgu neredeyse her HTML etiketine uygulanabilir (bazı tablo etiketleri hariç). Ek olarak, elemanın dört tarafının tamamı farklı bir değere sahip olabilir.
CSS Dolgu Özelliği
Kestirme CSS dolgu özelliğini kullanmak için mnemonic “TRouBLe” yi (veya Star Trek hayranları için “TRiBbLe”) kullanabilirsiniz. Bu, üst , sağ , alt ve sola karşılık gelir ve kısayol özelliğinde ayarladığınız dolgu genişliklerinin sırasına karşılık gelir. Örneğin:
dolgu: sağ üst sol alt; dolgu malzemesi: 1px 2px 3px 6px;Yukarıda listelenen değerleri kullandıysanız, uyguladığınız HTML öğesinin her bir tarafına farklı bir dolgu değeri uygular. Aynı dolguyu dört tarafa da uygulamak isterseniz, CSS'nizi basitleştirebilir ve sadece bir değer yazabilirsiniz:
dolgu malzemesi: 12px;Bu CSS çizgisiyle, öğenin 4 tarafına 12 piksel dolgu uygulanacaktır.
Dolgunun alt ve üst, sol ve sağ için aynı olmasını istiyorsanız, iki değer yazabilirsiniz:
dolgu malzemesi: 24px 48px;İlk değer (24px) üst ve alt için geçerli olurken, ikincisi sol ve sağa uygulanır.
Üç değer yazarsanız, bu, yatay dolguyu (sol ve sağ) aynı, üst ve alt değiştirirken yapar:
dolgu: sağ üst ve sol alt; dolgu malzemesi: 0px 1px 3px;CSS kutu modeline göre, doldurma öğeye / içeriğe en yakındır. Bu, dolgu genişliğinin, içerik genişliği veya yüksekliği ile kullandığınız sınır değerleri arasındaki bir öğeye eklendiği anlamına gelir. Dolgu sıfıra ayarlanmışsa, içerikle aynı kenara sahiptir.
CSS Dolgu Değerleri
CSS dolgu, herhangi bir negatif olmayan uzunluk değerini alabilir. Px veya em gibi ölçümleri belirttiğinizden emin olun. Ayrıca, dolgu maddesinin yüzdesini, öğenin içeren bloğun genişliğinin yüzdesi olarak belirtebilirsiniz. Bu, üst ve alt dolgu için içerir. Örneğin:
#container {genişlik: 800 piksel; yükseklik: 200px; } #container p {genişlik: 400 piksel; yükseklik:% 75; dolgu malzemesi:% 25 0; }#container öğesinin içindeki paragrafın yüksekliği # container'ın yüksekliğinin% 75'i, üst dolgu için genişliğin% 25'i ve alt dolgu için genişliğin% 25'i olacaktır. Bu toplam 300 + 200 + 200 = 700 pikseldir.
CSS Dolgusu Ekleme Etkileri
Blok seviyesinde elemanlarda , dolgu dört tarafa uygulanır. Öğe zaten bir blok veya kutu olduğundan, dolgu kutusu kutu kenarlarına uygulanır.
Satır içi elemanlara CSS dolgusu eklendiğinde, dikey dolgu çizgisi çizgi yüksekliğini aşarsa, satır içi elemanın üstünde ve altında bazı elemanların üst üste gelmesi olabilir, ancak hat yüksekliğini aşağı itmez. Satır öğelerine uygulanan yatay CSS dolgu elemanı, öğenin başlangıcına ve öğenin sonuna eklenir. Ve dolgu hatları çizebilir. Ancak, çok satırlı bir öğenin tüm satırları için geçerli olmayacağından, çok satırlı bir satır içi içeriğin bir bölümünü girmek için dolgu kullanamazsınız.
Ayrıca, CSS2.1'de, genişliğin genişliklere (veya dolgu genişliklerine) yönelik yüzdelerle bir öğeye bağlı olduğu durumlarda konteyner blokları oluşturamazsınız. Eğer yaparsanız sonuç tanımsızdır. Tarayıcılar içeriği hala gösterecektir, ancak beklediğiniz sonuçları alamayabilirsiniz. Bunu düşünürseniz, kap elemanınızın genişliğini tanımlamak için çocuk elemanlarının genişliğini bilmesi gerektiği gibi - önceden tanımlanmış bir genişliğe sahip olmadığı ve bir veya daha fazlasının olduğu gibi - mantıklıdır. konteyner elemanının yüzdesi olarak belirlenen bir genişlik, bu, cevapsız bir dairesel zincir oluşturur. Belgenizdeki herhangi bir şeyin genişlikleri için yüzdeler kullanırsanız, ana öğe genişliklerinin de tanımlandığından emin olmalısınız.