CSS width-egenskapen definerer bredden på elementets innholdsområde. Dette området er rommet mellom et elements kantlinje, polstring og marg. Dessuten har CSS width-egenskapen med verdien ' passe-innhold ” vil justere bredden på elementet i henhold til innholdet.
Denne studien vil forklare CSS-breddeegenskapen med verdien fit-content.
Hvordan bruke CSS-bredde-eiendom med tilpasset innholdsverdi?
For å bruke CSS width-egenskapen med tilpasset innholdsverdi, sjekk ut den gitte syntaksen:
bredde: passform
Eksempel
I HTML legger du til tre div-elementer med samme klassenavn ' eske ' og tre forskjellige klasser ' farge-1 ', ' farge-2 ', og ' farge-3 ', henholdsvis. Legg til
-element i hver div for å legge til innhold på nettsiden:
< div klasse = 'boks farge-1' >
< s > CSS-breddetilpasningsinnhold s >
div >
< div klasse = 'boks farge-2' >
< s > Hei Verden ! s >
div >
< div klasse = 'boks farge-3' >
< s > Teamarbeid begynner med å bygge tillit. Vi er et team som jobber til et felles oppdrag. s >
div >
Her er utdataene til HTML-koden:
Så langt har vi diskutert HTML-siden. Nå, i neste avsnitt, vil vi bruke forskjellige CSS-stiler på HTML-elementene for å få dem til å se bedre ut. I det pågående eksemplet vil vi sjekke oppførselen til ' bredde ' eiendom som har verdien ' passe-innhold ' i CSS.
Stil “boks” div
.eske {bredde: passform-innhold;
høyde: 50px;
farge: ghostwhite;
polstring: 6px;
margin: 2px;
skriftstørrelse: 18px;
}
« .eske ” refererer til div klasseboksen. Nedenfor er egenskapene som brukes på den:
-
- ' bredde ' eiendom med verdien ' passe-innhold ” bruker den tilgjengelige plassen, men den vil ikke overskride innholdet.
- ' høyde ” er egenskapen som bestemmer elementets høyde.
- ' farge ' definerer elementets skriftfarge.
- ' polstring egenskapen produserer plass innenfor elementets kant eller rundt innholdet.
- ' margin ” bestemmer plass rundt elementet.
- ' skriftstørrelse ”-egenskapen bestemmer skriftstørrelsen.
Stil 'farge-1' div
.farge- 1 {bakgrunnsfarge: #00ABB3;
}
« bakgrunnsfarge egenskapen er satt til .color-1 ” div.
Stil 'farge-2' div
.farge- 2 {bakgrunnsfarge: #083AA9;
}
Stil 'farge-3' div
bakgrunnsfarge: #4C6793;
}
Det kan observeres at bredden på elementet er satt lik innholdet:
Det er flott! Vi har med hell lært bruken av CSS ' bredde ' eiendom med verdien ' passe-innhold '.
Konklusjon
CSS width-egenskapen lar oss bruke flere verdier. Disse verdiene er i prosent, piksler eller mer. For å angi det i henhold til innholdet, ' passe-innhold ”-verdi kan angis. Dette innlegget har beskrevet CSS-bredde-egenskapen med verditilpasningsinnhold med en praktisk demonstrasjon.