CSS dolgusu, CSS kutu modelinin özelliklerinden biridir. Bu stenografi özelliği, bir HTML öğesinin dört tarafının etrafındaki dolguyu ayarlar. CSS dolgusu hemen hemen her HTML etiketine uygulanabilir (bazı tablo etiketleri hariç). Ek olarak, öğenin dört tarafı da farklı bir değere sahip olabilir.
CSS Doldurma Özelliği
Kısa yol CSS dolgu özelliğini kullanmak için anımsatıcı “TrouBLe” (veya Star Trek hayranları için “TRiBbLe”) kullanabilirsiniz. Bu üst, sağ, alt, ve ayrıldıve steno özelliğinde ayarladığınız dolgu genişliklerinin sırasını ifade eder. Örneğin: dolgu: sağ üst sol alt;
dolgu: 1 piksel 2 piksel 3 piksel 6 piksel;
Yukarıda listelenen değerleri kullandıysanız, uyguladığınız HTML öğesinin her tarafına farklı bir dolgu değeri uygular. Dört tarafa da aynı dolguyu uygulamak istiyorsanız, CSS’nizi basitleştirebilir ve sadece bir değer yazabilirsiniz: padding: 12px;
Bu CSS satırıyla, öğenin 4 kenarına da 12 piksel dolgu uygulanır. Padding’in üst ve alt ve sol ve sağ için aynı olmasını istiyorsanız, iki değer yazabilirsiniz: padding: 24px 48px;
İlk değer (24px) üst ve alt için geçerliyken, ikincisi sol ve sağ için geçerli olacaktır. Üç değer yazarsanız, üst ve alt değiştirirken yatay dolguyu (sol ve sağ) aynı yapar: dolgu: üst sağ ve sol alt;
dolgu: 0px 1px 3px;
CSS kutu modeline göre dolgu, öğenin/içeriğin kendisine en yakın olanıdır. Bu, içerik genişliği veya yüksekliği ile kullandığınız kenarlık değerleri arasına bir öğeye dolgu eklendiği anlamına gelir. Dolgu sıfıra ayarlanırsa içerikle aynı kenara sahiptir.
CSS Dolgu Değerleri
CSS dolgusu, negatif olmayan herhangi bir uzunluk değeri alabilir. px veya em gibi ölçümü belirttiğinizden emin olun. Ayrıca, dolgunuz için, öğenin içeren bloğunun genişliğinin bir yüzdesi olacak bir yüzde de belirtebilirsiniz. Bu, üst ve alt dolguyu içerir. Örneğin: #container { genişlik: 800 piksel; yükseklik: 200 piksel; }
#container p { genişlik: 400 piksel; yükseklik: %75; dolgu: %25 0; }
İçindeki paragrafın yüksekliği #konteyner öğesi% 75 olacak #konteyneryüksekliği artı üst dolgu için genişliğin %25’i ve alt dolgu için genişliğin %25’i. Bu toplam 300 + 200 + 200 = 700 pikseldir.
CSS Dolgusu Eklemenin Etkileri
Blok seviyesindeki elemanlarda, dört tarafa dolgu uygulanır. Öğe zaten bir blok veya kutu olduğundan, kutu kenarlarına dolgu uygulanır. Satır içi öğelere CSS dolgusu eklendiğinde, dikey dolgu satır yüksekliğini aşarsa satır içi öğenin üstünde ve altında bazı öğeler çakışabilir, ancak satır yüksekliğini aşağı itmez. Satır içi öğelere uygulanan yatay CSS dolgusu, öğenin başına ve sonuna eklenecektir. Ve dolgu hatları sarabilir. Ancak, çok satırlı bir öğenin tüm satırlarına uygulanmayacağından, çok satırlı satır içi içeriğin bir bölümünü girintilemek için dolgu kullanamazsınız. Ayrıca, CSS2.1’de, genişliğin, genişlik (veya dolgu genişlikleri) için yüzdeleri olan bir öğeye bağlı olduğu kap blokları oluşturamazsınız. Bunu yaparsanız sonuç tanımsızdır. Tarayıcılar içeriği görüntülemeye devam edecek, ancak beklediğiniz sonuçları alamayabilirsiniz. Bunu düşünürseniz, kapsayıcı öğenizin genişliğini tanımlamak için alt öğelerinin genişliğini bilmesi gerekiyormuş gibi mantıklıdır – örneğin önceden tanımlanmış bir genişliğe sahip olmadığında ve bir veya daha fazla kap öğesinin yüzdesi olarak ayarlanmış bir genişlik, bu yanıtsız dairesel bir zincir oluşturur. Belgenizdeki herhangi bir şeyin genişlikleri için yüzdeler kullanıyorsanız, üst öğe genişliklerinin de tanımlandığından emin olmalısınız.
Biçim mla apa chicago Alıntıınız
Kyrnin, Jennifer. “CSS Dolgusuna Kısa Bir Bakış.” Düşünce Şirketi, Mayıs. 14, 2021, thinkco.com/css-padding-overview-3469778.
Kyrnin, Jennifer. (2021, 14 Mayıs). CSS Dolgusuna Kısa Bir Bakış. https://www.thinktco.com/css-padding-overview-3469778 adresinden alındı
Kyrnin, Jennifer. “CSS Dolgusuna Kısa Bir Bakış.” Düşünce Şirketi https://www.thinktco.com/css-padding-overview-3469778 (30 Mayıs 2021’de erişildi).
