CSS width-egenskapen definierar bredden på elementets innehållsområde. Detta område är utrymmet mellan ett elements kant, stoppning och marginal. Dessutom, egenskapen CSS width med värdet ' passform ” kommer att justera bredden på elementet efter innehållet.
Denna studie kommer att förklara egenskapen CSS width med värdet fit-content.
Hur använder man CSS width-egenskap med passningsinnehållsvärde?
För att använda CSS width-egenskapen med passformsinnehållsvärde, kolla in den givna syntaxen:
bredd: passform
Exempel
I HTML, lägg till tre div-element med samma klassnamn ' låda ” och tre olika klasser ” färg-1 ”, “ färg-2 ', och ' färg-3 ”, respektive. Lägg till
-element i varje div för att lägga till innehåll på webbsidan:
< div klass = 'låda färg-1' >
< sid > CSS width fit innehåll sid >
div >
< div klass = 'låda färg-2' >
< sid > Hej världen ! sid >
div >
< div klass = 'låda färg-3' >
< sid > Lagarbete börjar med att bygga förtroende. Vi är ett team som arbetar för ett gemensamt uppdrag. sid >
div >
Här är utdata från HTML-koden:
Hittills har vi diskuterat HTML-sidan. Nu, i nästa avsnitt, kommer vi att tillämpa olika CSS-stilar på HTML-elementen för att få dem att se bättre ut. I det pågående exemplet kommer vi att kolla upp beteendet hos ' bredd ' egendom som har värdet ' passform ” i CSS.
Stil 'box' div
.låda {bredd: passformsinnehåll;
höjd: 50px;
färg: spökvit;
stoppning: 6px;
marginal: 2px;
teckenstorlek: 18px;
}
den ' .låda ” hänvisar till div klassrutan. Nedan är egenskaperna som tillämpas på den:
-
- ' bredd ' egenskap med värdet ' passform ” använder det tillgängliga utrymmet, men det kommer inte att överskrida innehållet.
- ' höjd ” är egenskapen som bestämmer elementets höjd.
- ' Färg ” definierar elementets teckensnittsfärg.
- ' stoppning ” egenskapen producerar utrymme innanför elementets kant eller runt innehållet.
- ' marginal ” bestämmer utrymmet runt elementet.
- ' textstorlek ” egenskapen bestämmer teckenstorleken.
Stil 'color-1' div
.Färg- 1 {bakgrundsfärg: #00ABB3;
}
den ' bakgrundsfärg egenskapen är inställd på .color-1 ” div.
Stil 'color-2' div
.Färg- 2 {bakgrundsfärg: #083AA9;
}
Stil 'color-3' div
bakgrundsfärg: #4C6793;
}
Det kan observeras att elementets bredd sätts lika med innehållet:
Toppen! Vi har framgångsrikt lärt oss användningen av CSS ' bredd ' egenskap med värdet ' passform ”.
Slutsats
CSS width-egenskapen tillåter oss att använda flera värden. Dessa värden är i procent, pixlar eller mer. För att ställa in den efter innehållet, ' passform ”-värdet kan ställas in. Det här inlägget har beskrivit egenskapen CSS width med värdet fit-content med en praktisk demonstration.