CSS genişlik özelliği, öğenin içerik alanının genişliğini tanımlar. Bu alan, bir öğenin kenarlığı, dolgusu ve kenar boşluğu arasındaki boşluktur. Ayrıca, “değerine sahip CSS genişlik özelliği uygun içerik ”, içeriğine göre elemanın genişliğini ayarlayacaktır.
Bu çalışma, fit-content değeri ile CSS genişlik özelliğini açıklayacaktır.
Fit-content Değeriyle CSS Genişlik Özelliği Nasıl Kullanılır?
Sığdırma içeriği değeriyle CSS genişlik özelliğini kullanmak amacıyla, verilen sözdizimini kontrol edin:
genişlik: uygun içerik
Örnek vermek
HTML'de, aynı sınıf adına sahip üç div öğesi ekleyin ' Kutu ” ve üç farklı sınıf” renk-1 ”, “ renk-2 ', ve ' renk-3 ', sırasıyla. Web sayfasına içerik eklemek için her div'in içine
öğesini ekleyin:
< div sınıf = 'kutu rengi-1' >
< p > CSS genişliği sığdırma içeriği p >
div >
< div sınıf = 'kutu rengi-2' >
< p > Selam Dünya ! p >
div >
< div sınıf = 'kutu rengi-3' >
< p > Takım çalışması güven inşa etmekle başlar. Biz çalışan bir ekibiz için ortak bir misyon p >
div >
İşte HTML kodunun çıktısı:
Şimdiye kadar, HTML sayfasını tartıştık. Şimdi, bir sonraki bölümde, daha iyi görünmelerini sağlamak için HTML öğelerine farklı CSS stilleri uygulayacağız. Devam eden örnekte, “ davranışını kontrol edeceğiz. Genişlik 'değere sahip özellik' uygun içerik ” CSS'de.
Stil 'kutu' div
.Kutu {genişlik: uygun içerik;
yükseklik: 50 piksel;
renk: hayalet beyazı;
dolgu: 6 piksel;
kenar boşluğu: 2 piksel;
yazı tipi boyutu: 18 piksel;
}
“ .Kutu ”, div sınıfı kutusunu ifade eder. Ona uygulanan özellikler aşağıdadır:
-
- “ Genişlik ' değeri olan özellik ' uygun içerik ” kullanılabilir alanı kullanır, ancak içeriği aşmayacaktır.
- “ boy uzunluğu ”, elemanın yüksekliğini belirleyen özelliktir.
- “ renk ”, öğenin yazı tipi rengini tanımlar.
- “ dolgu malzemesi ” özelliği, öğenin kenarlığı içinde veya içeriğin çevresinde boşluk oluşturur.
- “ marj ”, elemanın etrafındaki boşluğu belirler.
- “ yazı Boyutu ” özelliği yazı boyutunu belirler.
Stil 'renk-1' div
.renk- 1 {arka plan rengi: #00ABB3;
}
“ arka plan rengi ” özellik “ olarak ayarlandı .renk-1 ” div.
Stil “renk-2” div
.renk- 2 {arka plan rengi: #083AA9;
}
Stil “color-3” div
arka plan rengi: #4C6793;
}
Elemanın genişliğinin içeriğe eşit olarak ayarlandığı gözlemlenebilir:
Bu harika! CSS kullanımını başarıyla öğrendik” Genişlik ' değeri olan özellik ' uygun içerik ”.
Çözüm
CSS genişliği özelliği, birkaç değer kullanmamıza izin verir. Bu değerler yüzde, piksel veya daha fazladır. İçeriğe göre ayarlamak için “ uygun içerik ” değeri ayarlanabilir. Bu gönderi, pratik bir gösteri ile değer sığdırma içeriğine sahip CSS genişlik özelliğini açıkladı.