CSS svojstvo širine definira širinu područja sadržaja elementa. Ovo područje je prostor između obruba, ispune i margine elementa. Štoviše, CSS svojstvo širine s vrijednošću ' fit-sadržaj ” prilagodit će širinu elementa prema sadržaju.
Ova studija će objasniti CSS svojstvo širine s vrijednošću fit-content.
Kako koristiti CSS svojstvo širine s vrijednošću fit-content?
U svrhu korištenja CSS svojstva širine s vrijednošću fit-content, provjerite danu sintaksu:
širina: fit-sadržaj
Primjer
U HTML dodajte tri div elementa s istim nazivom klase ' kutija 'i tri različite klase' boja-1 ”, “ boja-2 ', i ' boja-3 ”, odnosno. Dodajte
element unutar svakog diva da biste dodali sadržaj na web stranicu:
< div razreda = 'box boja-1' >
< str > Sadržaj prilagođen CSS širini str >
div >
< div razreda = 'boja okvira-2' >
< str > Pozdrav svijete ! str >
div >
< div razreda = 'box boja-3' >
< str > Timski rad počinje izgradnjom povjerenja. Mi smo timski rad za zajednička misija. str >
div >
Evo izlaza HTML koda:
Do sada smo razgovarali o HTML stranici. Sada, u sljedećem odjeljku, primijenit ćemo različite CSS stilove na HTML elemente kako bi izgledali bolje. U primjeru koji je u tijeku, provjerit ćemo ponašanje ' širina 'imovina koja ima vrijednost' fit-sadržaj ” u CSS-u.
Stil “box” div
.kutija {širina: fit-sadržaj;
visina: 50px;
boja: ghostwhite;
ispuna: 6px;
margina: 2px;
veličina fonta: 18px;
}
' .kutija ” odnosi se na okvir klase div. Ispod su svojstva koja se na njega primjenjuju:
-
- “ širina ' svojstvo s vrijednošću ' fit-sadržaj ” koristi raspoloživi prostor, ali neće premašiti sadržaj.
- “ visina ” je svojstvo koje određuje visinu elementa.
- “ boja ” definira boju fonta elementa.
- “ podstava ” svojstvo stvara prostor unutar obruba elementa ili oko sadržaja.
- “ margina ” određuje prostor oko elementa.
- “ veličina fonta ” svojstvo određuje veličinu fonta.
Stil 'boja-1' div
.boja- 1 {boja pozadine: #00ABB3;
}
' boja pozadine svojstvo je postavljeno na ' .boja-1 ” div.
Stil 'boja-2' div
.boja- 2 {boja pozadine: #083AA9;
}
Stil 'boja-3' div
boja pozadine: #4C6793;
}
Može se uočiti da je širina elementa postavljena jednako sadržaju:
To je odlično! Uspješno smo naučili koristiti CSS “ širina ' svojstvo s vrijednošću ' fit-sadržaj ”.
Zaključak
CSS svojstvo širine omogućuje nam korištenje nekoliko vrijednosti. Ove vrijednosti su u postocima, pikselima ili više. Da biste ga postavili prema sadržaju, ' fit-sadržaj ” može se postaviti vrijednost. Ovaj post opisuje CSS svojstvo širine s vrijednošću fit-content uz praktičnu demonstraciju.