Hvordan sette inn indre kant i CSS

Når en grense er plassert inne i beholderen, er den kjent som den indre grensen. Indre grenser brukes til å gjøre beholderen stabil. Når en beholder opprettes, utvides høyden og bredden vanligvis med tilsetning av forskjellige egenskaper, for eksempel polstring. For å unngå denne situasjonen plasseres en grense inne i beholderen.

I denne artikkelen lærer vi hvordan du setter den indre grensen i CSS.

Hvordan sette inn indre kant i CSS?

I CSS kan en indre grense settes ved hjelp av følgende egenskaper:

• Eiendom i boksen
• Skissere eiendom
• Bokseskygge eiendom

La oss utforske hver egenskap med nyttige eksempler.

Metode 1: Bruke eiendommer for størrelse for å sette inn indre kant i CSS

“Bokstørrelse”Eiendom opprettholder beholderens høyde og bredde når polstringen eller grensen legges til den. Når egenskapen til kassestørrelse brukes med "grenseboks”Verdi, polstringen og grensen til elementet vil bli inkludert i den totale høyden og bredden.

Nå, sjekk ut det oppgitte eksemplet.

Eksempel

Foreløpig har websiden vår en beholder med høyde og bredde satt som "250px”. Imidlertid, når vi har lagt til en grense, utvides den spesifiserte høyden og breddeverdien til "276px”, Som kan sees i det undergitte bildet:

I HTML -filen vår har vi lagt til en "”Med en klasse“eksempel”Og plasserte den inne i“" stikkord:

For styling den opprettede beholderen, legg en “.”Før klassenavnet som“.eksempel”. Spesifiser deretter høyden og bredden som "250px", sett "13px”Oransje kant, og bruk“grenseboks”Som eiendommer for størrelse på dimensjonering. Dessuten har vi også satt "bakgrunnsfarge" som "Aqua”For å skille mellom bakgrunnen og den ekstra grensen.

Lagre den medfølgende koden og åpne HTML -filen i nettleseren din:

.Eksempel
Bakgrunnsfarge: Aqua;
Bredde: 250px;
Høyde: 250px;
Grense: 13px solid oransje;
Bokstørrelse: Border-Box;

Som et resultat vil grensen bli lagt inne i beholderen, og høyden og bredden vil forbli den samme:

Gå videre mot neste metode!

Metode 2: Bruke konturegenskap for å sette inn indre kant i CSS

CSS “skissere”Eiendom legger enkelt en linje rundt elementets boks med ønsket bredde, farge og type. Dette betyr at vi kan bruke omrissegenskapen for å sette den indre grensen. I tillegg “konturforbud ” Eiendom hjelper til med å begrense utvidelsen av grensen.

Eksempel

Spesifiser “skissere”Eiendom med verdien”Fast 12px oransje”, Der oransje er fargen for linjen og 12px er bredden, og faststoff er en type stil for linjen. Bruk deretter “Oversiktsveksten”Eiendom sammen med“-12px”Verdi. Dette vil sette grensen inne i beholderen og begrense utvidelsen med hensyn til beholderen:

.Eksempel
Bakgrunnsfarge: Aqua;
Bredde: 250px;
Høyde: 250px;
Oversikt: Solid 12px oransje;
disposisjons -offset: -12px;

Produksjon

Å sveve over den ekstra beholderen vil vise sin nåværende dimensjon som er "250 x 250”Som spesifisert i HTML -filen:

Ønsker å sette en indre kant ved hjelp av skygger? La oss sjekke ut følgende avsnitt.

Metode 3: Bruke eiendomsskygge-egenskap for å sette inn indre kant i CSS

“Bokseskygge”Eiendom brukes hovedsakelig til å slippe skyggene fra rammene til elementer. Å bruke denne egenskapen på en bestemt måte kan imidlertid sette den indre grensen effektivt.

Eksempel

I HTML -filen, oppgi "Bokseskygge”Eiendom med verdien”innsatt 0px 0px 0px 12px oransje”, Der oransje er en farge, vil 12px gjøre skyggen bredere, og innsatsen vil plassere skyggen inne i beholderen. De andre 0px -verdiene er relatert til motregning og uskarphet. Kombinasjonen av alle disse verdiene vil danne en indre grense ved bruk av skygger:

.Eksempel
Bakgrunnsfarge: Aqua;
Bredde: 250px;
Høyde: 250px;
Bokseskygge: innsatt 0px 0px 0px 12px oransje;

Produksjon

For å bekrefte om høyde- og breddeverdiene fremdeles er de samme, se beholderdimensjonen ved å sveve over den:

Vi har tilbudt de mest passende metodene for å sette indre grenser i CSS.

Konklusjon

For å stille inn den indre grensen, kan du bruke “Bokstørrelse”,“skissere”, Og“Bokseskygge”CSS -egenskaper. Eiendommen til boksen brukes til å begrense utvidelsen av den ekstra grensen. Oversiktsegenskapen brukes i kombinasjon med konturforbudet for å legge til en disposisjon som en indre kant. Dessuten kan skygger også brukes til det spesifiserte formålet ved hjelp av boksen-skygge-eiendommen. I dette innlegget har vi beskrevet tre metoder for å sette den indre grensen i CSS.