Hvordan sette bredde og høydepunkt i CSS

I HTML er Span en inline container som brukes til teksturinnhold og styler dem. Men du kan ikke stille inn bredden og høyden på spennet som normalt satt for de andre HTML -elementene. I et slikt scenario, bruk "vise”Eiendom til CSS og sett deretter bredden og høyden på spennet i henhold til dine krav.

I denne håndboken vil vi diskutere hvordan du kan justere høyden og bredden på et spenn i CSS.

Hva er "vis" egenskap i CSS?

“vise”Eiendom brukes til å angi visningsatferden til HTML -elementet. Denne CSS -egenskapen kan brukes til å spesifisere om et element skal behandles som inline eller blokkering eller for å sette ut utformingen av barna. For å være mer spesifikk, kan du bruke den til å justere bredden og høyden på spennet i CSS.

Syntaks

Syntaksen til displayegenskapen er:

Display: Block | Inline-block

Her er beskrivelsen av de ovennevnte verdiene:

• blokkere: Det brukes til å stille inn elementets bredde og høyde.
• Inline-block: Det brukes til å stille inn marginene og polstring av elementet.

Gå nå til eksemplene der vi vil sette bredden og høyden på spennet ved å bruke blokken og inline-block-verdiene til displayegenskapen.

Eksempel 1: Innstilling av bredde og høyde på spennet ved bruk av "blokk"

For å stille inn bredden og høyden på spennet, lag først et spenn i HTML ved hjelp av taggen:

Html

Bredde og høydepunkt

I CSS, sett bredden og høyden på spennet ved å bruke "vise”Eiendom. For å gjøre det, bruk "spenn”For å få tilgang til det. Etter det, sett verdien av visningsegenskapen som “blokkere”Og dens bredde og høyde som“400px”Og“150px”. Angi dessuten bakgrunnsfargen på spennet som "RGB (11, 235, 243)”Og grensen til spennet som“5px”Bredde,“fast”Form, og“RGB (47, 0, 255)”Farge.

CSS

Span
Display: Block;
Bredde: 400px;
Høyde: 150px;
Bakgrunn: RGB (11, 235, 243);
grense: 5px fast RGB (47, 0, 255);

Som du ser, har vi med hell satt bredden og høyden på spennet i CSS:

La oss flytte til neste eksempel

Eksempel 2: Innstilling av bredde og høyde på spennet ved å bruke "inline-block"

I dette eksemplet vil vi bruke “Inline-block”Verdien av displayegenskapen for å justere høyden og bredden på spennet.

For dette formålet vil vi lage et spenn i HTML samme som det forrige eksemplet, og deretter flytte til CSS og sette verdien av displayegenskapen som "Inline-block”Og sett bredden og høyden på spennet som“400px”Og“150px”. Angi dessuten bakgrunnsfargen på spennet som "RGB (209, 173, 95)”Og grensen til spennet som“5px”,“fast”, Og“RGB (255, 166, 0)”:

Span
Display: Inline-block;
Bredde: 400px;
Høyde: 150px;
Bakgrunn: RGB (209, 173, 95);
grense: 5px fast RGB (255, 166, 0);

Dette vil gi oss følgende utfall:

Ovenfra gitte eksempler kan det observeres at bruk av “blokkere”Og“Inline-blockVerdier for displayegenskapen, høyden og breddeegenskapene til CSS kan justeres.

Konklusjon

Ved å bruke visningseiendomens “blokkere”Og“Inline-block”Verdier, høyden og bredden på spennet kan justeres. Du kan bruke en av dem etter ditt valg; Begge gir samme resultat. I denne håndboken har vi forklart prosedyren relatert til innstilling av bredden og høyden på spennet ved hjelp av CSS Display -egenskapen.