De eigenschap CSS width definieert de breedte van het inhoudsgebied van het element. Dit gebied is de ruimte tussen de rand, opvulling en marge van een element. Bovendien is de eigenschap CSS width met de waarde ' fit-inhoud ” zal de breedte van het element aanpassen aan de inhoud.
Deze studie zal de eigenschap CSS width uitleggen met de waarde fit-content.
Hoe CSS-breedte-eigenschap te gebruiken met fit-content-waarde?
Bekijk de gegeven syntaxis voor het gebruik van CSS-breedte-eigenschap met fit-content-waarde:
breedte: pasvorm-inhoud
Voorbeeld
Voeg in HTML drie div-elementen toe met dezelfde klassenaam ' doos ” en drie verschillende klassen “ kleur-1 ”, “ kleur-2 ', en ' kleur-3 ”, respectievelijk. Voeg een
-element toe aan elke div om inhoud aan de webpagina toe te voegen:
< div klas = 'doos kleur-1' >
< p > CSS-inhoud past in de breedte p >
div >
< div klas = 'doos kleur-2' >
< p > Hallo Wereld ! p >
div >
< div klas = 'doos kleur-3' >
< p > Teamwork begint met het opbouwen van vertrouwen. We zijn een team dat werkt voor een gemeenschappelijke missie. p >
div >
Hier is de uitvoer van de HTML-code:
Tot nu toe hebben we de HTML-pagina besproken. Nu, in de volgende sectie, zullen we verschillende CSS-stijlen toepassen op de HTML-elementen om ze er beter uit te laten zien. In het lopende voorbeeld bekijken we het gedrag van de ' breedte ” eigenschap met de waarde “ fit-inhoud ” in de CSS.
Stijl “doos” div
.doos {breedte: fit-inhoud;
hoogte: 50px;
kleur: spookwit;
opvulling: 6px;
marge: 2px;
lettergrootte: 18px;
}
De ' .doos ” verwijst naar het vak div class. Hieronder staan de eigenschappen die erop worden toegepast:
-
- “ breedte ” eigenschap met de waarde “ fit-inhoud ” gebruikt de beschikbare ruimte, maar overschrijdt de inhoud niet.
- “ hoogte ” is de eigenschap die de hoogte van het element bepaalt.
- “ kleur ” definieert de letterkleur van het element.
- “ opvulling ” eigenschap produceert ruimte binnen de rand van het element of rond de inhoud.
- “ marge ” bepaalt de ruimte rondom het element.
- “ lettertypegrootte ” eigenschap bepaalt de lettergrootte.
Stijl “kleur-1” div
.kleur- 1 {Achtergrond kleur: #00ABB3;
}
De ' Achtergrond kleur ” eigendom is ingesteld op de “ .kleur-1 ” div.
Stijl “kleur-2” div
.kleur- 2 {Achtergrond kleur: #083AA9;
}
Stijl “kleur-3” div
Achtergrond kleur: #4C6793;
}
Er kan worden opgemerkt dat de breedte van het element gelijk is gesteld aan de inhoud:
Dat is geweldig! We hebben met succes het gebruik van de CSS geleerd ' breedte ” eigenschap met de waarde “ fit-inhoud ”.
Conclusie
Met de eigenschap CSS width kunnen we verschillende waarden gebruiken. Deze waarden zijn in percentage, pixels of meer. Om het in te stellen volgens de inhoud, de ' fit-inhoud ” waarde kan worden ingesteld. Dit bericht heeft de eigenschap CSS width beschreven met de waarde fit-content met een praktische demonstratie.