CSS inline -blokk

Hvert element i HTML blir behandlet som en boks i nettleseren. Det er derfor deres visning i en nettleser betyr veldig og påvirker oppsettet. Imidlertid tilbyr CSS to typer bokser, inline og blokkering. Du kan bruke noen av dem i henhold til sidestrømmen og med hensyn til andre bokser på siden.

Denne bloggen vil guide deg om CSS Inline og Block Elements Display. Så la oss begynne!

Hva er CSS -viser eiendomsverdier?

Tre verdier av CSS -skjermegenskaper er listet opp nedenfor:

• blokkere: Blokkelementene starter på en ny linje og fyller hele bredden, fra venstre til høyre.
• på linje: Inline -elementene vises på samme linje.
• Inline-block: Inline-block-egenskapsverdien er som inline-verdien, men den gir også margin- og polstringsegenskaper til elementet.

La oss utdype hver av dem gjennom et eksempel en etter en!

Eksempel

I HTML -filen, legg til

element for å gi innhold i nettleseren.

Html

Beste CSS -opplæringsprogrammer

Vis eiendom: Blokk

“blokkere”Display tar elementet til den nye linjen og opptar hele bredden på siden. Hvis du vil endre størrelsen, kan du bruke bredde- og høydeegenskapene til CSS.

Nå, i CSS, bruker du “vise”Eiendomsverdi satt som“blokkere”Til det ekstra avsnittet og tilordne“grense" som "5px Solid RGB (204, 13, 172)”. Grensen vil betegne oppførselen til displayegenskaper.

CSS

Det undervernede bildet indikerer oppførselen til blokkeringsegenskapen, som vi har beskrevet ovenfor:

Vis eiendom: Inline

“på linje”Eiendom tar ikke elementet til neste linje, og noen av bredde- og høydeegenskapene vil ikke påvirke denne egenskapen.

I CSS vil vi nå tildele "vise”Eiendomsverdi som“på linje”.

CSS

Display: Inline;

Det undergitte bildet indikerer at teksten er inline:

Vis eiendom: Inline-block

Denne verdien fungerer den samme som inline displayverdien. Forskjellen er at denne displayegenskapen kan endres ved hjelp av margin- og polstringsegenskaper. Dessuten kan du også angi bredde og høydeverdier i henhold til dine preferanser.

CSS

Display: Inline-block;

Nedenfor er bildet, som viser inline-block-elementet uten bredde- og høydeegenskaper:

For å se den klare forskjellen mellom inline og inline-block-skjerm. La oss se gjennom et praktisk eksempel.

Eksempel: Forskjell mellom inline og inline-block

I delen under nevnte kod

stikkord. Inne i dette elementet har vi plassert to “”Med klasse“x”Og klasse“y”.

Merk: er som standard et inline element.

Html

Css- cascading = "x"> stil = "y"> ark beskriver hvordan HTML -elementer skal vises på skjermen.

I CSS -delen vil vi tilordne visningsegenskapsverdien til klasse X som "på linje”Mens klasse Y med verdien”Inline-block”. Merk at alle de andre stylingegenskapene brukes på begge klasser på samme måte.

CSS

I det undervernede bildet kan du se den klare forskjellen i begge klasser, den første er inline, og den andre vises i en inline-block:

Liste over noen inline-, blokkerings- og inline-block HTML-elementer

Mange av HTML-elementene er som standard inline, blokkering eller inline-block. Noen av dem er listet opp nedenfor:

HTML inline -elementer

• spenn
• en
• img

HTML -blokkeringselementer

• p
• li
• div
• H1
• seksjon

HTML inline-block-elementer

• knapp
• inngang
• tekstarea
• plukke ut

Vi har diskutert oppførselen til inline, blokkering og inline-block HTML-elementer.

Konklusjon

CSS -displayegenskapen kontrollerer utformingen av elementene. Denne CSS-egenskapen kan brukes med tre verdier, inline, blokkering og inline-blokk. Hver verdi representerer forskjellig oppførsel. Mer spesifikt er den inline-block-egenskapverdien lik inline-verdien, men den gir også margin- og polstringsegenskaper til elementet. I denne artikkelen har vi forklart egenskapen til CSS med eksempler.