CSS -bredde passer innhold

CSS -breddeegenskap definerer bredden på elementets innholdsområde. Dette området er rommet mellom et elements grense, polstring og margin. Dessuten CSS -breddeegenskapen med verdien “Fit-content”Vil justere bredden på elementet i henhold til innholdet.

Denne studien vil forklare CSS-breddeegenskapen med verdien Fit-Content.

Hvordan bruke CSS-breddeegenskaper med passformverdi?

For å bruke CSS-breddeegenskaper med passformverdi, sjekk ut den gitte syntaks:

Bredde: Fit-Content

Eksempel

I HTML, legg til tre DIV -elementer med samme klassenavn “eske”Og tre forskjellige klasser”farge-1”,“farge-2”, Og“farge-3”, Henholdsvis. Legg til

element inne i hver div for å legge til innhold på websiden:

CSS -bredde passer innhold

Hei Verden!

Teamarbeid begynner med å bygge tillit. Vi er et team som jobber for et felles oppdrag.

Her er utgangen fra 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. I det pågående eksemplet vil vi sjekke oppførselen til "bredde”Eiendom som har verdien”Fit-content”I CSS.

Stil “Box” Div

.Boks
Bredde: Fit-Content;
Høyde: 50px;
Farge: Ghostwhite;
polstring: 6px;
Margin: 2px;
Font-størrelse: 18px;

“.eske”Henviser til Div Class Box. Nedenfor er egenskapene som brukes på det:

• • “bredde”Eiendom med verdien”Fit-content”Bruker den tilgjengelige plassen, men det vil ikke overstige innholdet.
  • “høyde”Er eiendommen som bestemmer elementets høyde.
  • “farge”Definerer elementets skriftfarge.
  • “polstring”Eiendom produserer plass inne i elementets grense eller rundt innholdet.
  • “margin”Bestemmer plass rundt elementet.
  • “skriftstørrelse”Eiendom bestemmer skriftstørrelsen.

Stil “color-1” div

.farge-1
Bakgrunnsfarge: #00ABB3;

“bakgrunnsfarge”Eiendommen er satt til“.farge-1”Div.

Stil “color-2” div

.color-2
Bakgrunnsfarge: #083AA9;

Stil “color-3” div

.color-3
Bakgrunnsfarge: #4C6793;

Det kan observeres at bredden på elementet er satt lik innholdet:

Det er flott! Vi har lært bruken av CSS “bredde”Eiendom med verdien”Fit-content”.

Konklusjon

CSS -breddeegenskapen lar oss bruke flere verdier. Disse verdiene er i prosent, piksler eller mer. For å stille det i henhold til innholdet, "Fit-content”Verdien kan settes. Dette innlegget har beskrevet CSS-breddeegenskapen med verdien som passer inngående med en praktisk demonstrasjon.