CSS Dolgusunun Temellerini Anlama

click fraud protection

CSS dolgusu, aşağıdakilerin özelliklerinden biridir. CSS kutu modeli. Bu stenografi özelliği, bir HTML öğesinin dört tarafının etrafındaki dolguyu ayarlar. CSS dolgusu hemen hemen her HTML etiketi (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 isterseniz, işinizi basitleştirebilirsiniz. CSS ve sadece bir değer yazın:

dolgu: 12 piksel;

Bu CSS satırıyla, öğenin 4 kenarına da 12 piksel dolgu uygulanır.

Doldurmanın üst ve alt ve sol ve sağ için aynı olmasını istiyorsanız, iki değer yazabilirsiniz:

instagram viewer
dolgu: 24 piksel 48 piksel;

İlk değer (24px) üst ve alt için geçerli olurken, ikincisi sol ve sağ için geçerli olacaktır.

Üç değer yazarsanız, üst ve alt kısımları değiştirirken yatay dolguyu (sol ve sağ) aynı yapacaktır:

dolgu: sağ üst 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 öğeyi içeren bloğun genişliğinin yüzdesi olacak bir yüzde belirleyebilirsiniz. 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; }

yükseklik içindeki paragrafın #konteyner elementin %75'i olacaktır. #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

açık blok düzeyinde öğeler, dolgu dört tarafa uygulanır. Öğe zaten bir blok veya kutu olduğundan, kutu kenarlarına dolgu uygulanır.

CSS dolgusu eklendiğinde satır içi öğeler, dikey dolgu satır yüksekliğini aşarsa, satır içi elemanın üstünde ve altında bir miktar örtüşme olabilir, 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 bu, ç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şliğe sahip olduğunda, bu, Cevap. 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.

instagram story viewer