Hvordan legge til horisontalt og vertikalt mellomrom mellom elementer i medvind?

Hvordan Legge Til Horisontalt Og Vertikalt Mellomrom Mellom Elementer I Medvind



Tailwind CSS gir ' mellomrom ” verktøy for å kontrollere mellomrommet mellom flex- eller rutenettbeholderens elementer. Den har forskjellige klasser, for eksempel 'mellomrom-x-', 'mellomrom-y-', 'mellomrom-x-omvendt', 'mellomrom-y-omvendt', osv. Disse verktøyene legger til horisontale og vertikalt mellomrom mellom flex- eller gitterelementer i beholderen.

Horisontal plass er et mellomrom langs x-aksen mellom underelementene til en flex- eller gitterbeholder når de er anordnet på rad. Vertikal plass er et mellomrom langs y-aksen mellom underelementene til en flex- eller rutenettbeholder når de er anordnet i en kolonne.

Denne artikkelen vil demonstrere:





Hvordan legge til horisontalt mellomrom mellom elementer i medvind?

For å legge til horisontalt mellomrom mellom elementene i Tailwind, ' space-x- ” klasse brukes med ønsket element i HTML-programmet. Denne klassen legger til mellomrom mellom elementer langs x-aksen.



Syntaks



klasse = 'mellomrom-x- ...'>... < / element>

Her representerer 'x' 'x-aksen' eller 'horisontalt rom'. Sørg for å erstatte '' med en hvilken som helst gyldig verdi, for eksempel '4', '10' osv.



Eksempel: Bruk av horisontalt mellomrom mellom elementer i medvind

I dette eksemplet har vi en flexbeholder med noen underordnede elementer. Vi vil bruke ' space-x-8 ' bruksklasse med '

'-element for å legge til horisontalt mellomrom mellom de underordnede elementene:



< kropp >

< div klasse = 'flex space-x-8 m-10 h-20 w-max' >

< div klasse = 'bg-teal-500 w-20 p-5' > 1 < / div >
< div klasse = 'bg-teal-500 w-20 p-5' > 2 < / div >
< div klasse = 'bg-teal-500 w-20 p-5' > 3 < / div >
< div klasse = 'bg-teal-500 w-20 p-5' > 4 < / div >
< div klasse = 'bg-teal-500 w-20 p-5' > 5 < / div >
< div klasse = 'bg-teal-500 w-20 p-5' > 6 < / div >

< / div >

< / kropp >

Her, i det overordnede

-elementet:

  • ' bøye seg ” klasse skaper en fleksibel layout.
  • ' space-x-8 Klasse legger til 8 enheter med horisontal avstand mellom flekselementer i en beholder.
  • ' m-10 ”-klassen legger til en margin på 10 enheter på alle sider av beholderen.
  • ' h-20 ” klasse setter høyden på containeren til 20 enheter.
  • ' w-maks ”-klassen setter beholderens bredde til dens maksimale innholdsbredde.

I underordnede

-elementer:

  • ' bg-teal-500 ”-klassen setter bakgrunnen for flex-elementer til blågrønn.
  • ' w-20 ” klasse setter bredden på hver flexvare til 20 enheter.
  • ' s-5 ”-klassen legger til 5 enheter med polstring på alle sider av hvert flex-element.

Produksjon

Ovennevnte utgang indikerer at det horisontale rommet mellom flekselementet er påført vellykket.

Hvordan legge til vertikal plass mellom elementer i medvind?

For å legge til vertikalt mellomrom mellom elementene i Tailwind, ' space-y- ” klasse brukes med det spesifikke elementet i HTML-programmet. Denne klassen legger til mellomrom mellom elementene langs y-aksen.

Syntaks

klasse = 'mellomrom-y- ...' >...< / element>

Her representerer 'y' 'y-aksen' eller 'vertikalt rom'. Sørg for å erstatte '' med en hvilken som helst reell verdi, for eksempel '5', '12' osv.

Eksempel: Bruk vertikalt mellomrom mellom elementer i medvind

I dette eksemplet har vi en fleksbeholder med noen underordnede elementer i en kolonne. Vi vil bruke ' space-y-5 ' bruksklasse med '

'-element for å legge til vertikalt mellomrom mellom de underordnede elementene:

< kropp >

< div klasse = 'flex flex-col space-y-5 m-10 text-center' >
< div klasse = 'bg-teal-500 p-5' > 1 < / div >
< div klasse = 'bg-teal-500 p-5' > 2 < / div >
< div klasse = 'bg-teal-500 p-5' > 3 < / div >
< div klasse = 'bg-teal-500 p-5' > 4 < / div >
< / div >

< / kropp >

Her:

  • ' bøye seg ” klasse skaper en fleksibel layout.
  • ' flex-col ”-klassen justerer flex-elementene i vertikal retning (i en kolonne).
  • ' space-y-5 ”-klassen legger til 5 enheter med vertikal avstand mellom flekselementene i en beholder.
  • ' m-10 ”-klassen legger til en margin på 10 enheter på alle sider av beholderen.
  • ' tekst-senter ”-klassen justerer teksten i beholderen til midten.

Produksjon

Det vertikale rommet mellom flex-elementene har blitt brukt effektivt.

Konklusjon

For å legge til det horisontale og vertikale rommet mellom elementene i Tailwind, ' space-x- ' og ' space-y- ” nytteklasser brukes med de ønskede elementene i HTML-programmet henholdsvis. Disse klassene brukes vanligvis med flex- og rutenettbeholdere for å kontrollere mellomrommet mellom underelementene deres. Denne artikkelen har eksemplifisert metoden for å bruke horisontalt og vertikalt mellomrom mellom elementer i Tailwind.

Annen

Kategori

Populære Innlegg

Hva er klasse A forsterker

Hva er Inheritance Constructor i C++

Hvordan synkronisere med et eksternt Git-lager?

Postgres Group_Concat

Hva er Subnet på AWS VPC og hvordan bruker jeg det?

Hvordan blokkerer du filer som er lastet ned fra Internett? - Winhelponline

Dell Alienware 17 R5 – Er det verdt å vurdere for spill?

Slik installerer du Proxmox VE 8 på serveren din

Fix npm kommando ikke funnet Feil

Hva står Vcc for i Arduino

Hva er S3-bøttens begrensninger og begrensninger?

Slik aktiverer du mørk modus på Windows 11

Hvordan deaktivere SmartScreen-filteret i Windows 11?

Hvordan sette JAVA_HOME i Linux

Hva er ESP32-moduler?

Slik fjerner du siste n-tegn fra en streng i Bash

Slik oppdaterer du Raspberry Pi-kjernen

Hvordan bruke spesialtegn i C-programmering?

Slik bruker du %i og %d til å skrive ut heltall i C ved å bruke printf()

Hvordan bruke preg_match_all()-funksjonen i PHP