Hvordan tilføjer man vandret og lodret mellemrum mellem elementer i medvind?

Hvordan Tilfojer Man Vandret Og Lodret Mellemrum Mellem Elementer I Medvind



Tailwind CSS giver ' mellemrum mellem ” hjælpeprogrammer til at kontrollere mellemrummet mellem flex- eller gitterbeholderens elementer. Det har forskellige klasser, såsom 'mellemrum-x-', 'mellemrum-y-', 'mellemrum-x-omvendt', 'mellemrum-y-omvendt' osv. Disse værktøjer tilføjer vandret og lodret mellemrum mellem flex- eller gitterelementer i beholderen.

Vandret rum er et mellemrum langs x-aksen mellem de underordnede elementer i en flex- eller gitterbeholder, når de er arrangeret i en række. Lodret rum er et mellemrum langs y-aksen mellem underelementerne i en flex- eller gitterbeholder, når de er arrangeret i en søjle.

Denne artikel vil demonstrere:





Hvordan tilføjer man vandret mellemrum mellem elementer i medvind?

For at tilføje vandret mellemrum mellem elementer i Tailwind, ' mellemrum-x- ” klasse bruges med det ønskede element i HTML-programmet. Denne klasse tilføjer mellemrum mellem elementer langs x-aksen.



Syntaks



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

Her repræsenterer 'x' 'x-aksen' eller 'vandret rum'. Sørg for at erstatte '' med enhver gyldig værdi, såsom '4', '10' osv.



Eksempel: Anvendelse af vandret mellemrum mellem elementer i medvind

I dette eksempel har vi en flexbeholder med nogle underordnede elementer. Vi vil bruge ' mellemrum-x-8 ' brugsklasse med '

' element for at tilføje vandret mellemrum mellem dets underordnede elementer:



< legeme >

< 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 >

< / legeme >

Her i det overordnede

-element:

  • “ bøje ” klasse skaber et fleksibelt layout.
  • “ mellemrum-x-8 ” klasse tilføjer 8 enheder vandret afstand mellem flexelementer i en container.
  • “ m-10 ” klasse tilføjer en margen på 10 enheder til alle sider af containeren.
  • “ h-20 ” klasse indstiller containerens højde til 20 enheder.
  • “ w-max ” klasse indstiller containerens bredde til dens maksimale indholdsbredde.

I de underordnede

-elementer:

  • “ bg-teal-500 ” klasse indstiller baggrunden for flex-elementer til blågrøn.
  • “ w-20 ” klasse indstiller bredden af ​​hver flexvare til 20 enheder.
  • “ p-5 ” klasse tilføjer 5 enheder polstring til alle sider af hver flex-vare.

Produktion

Ovenstående output indikerer, at det vandrette mellemrum mellem flexelementet er blevet anvendt med succes.

Hvordan tilføjer man lodret mellemrum mellem elementer i medvind?

For at tilføje lodret mellemrum mellem elementer i Tailwind, ' mellemrum-y- ” klasse bruges med det specifikke element i HTML-programmet. Denne klasse tilføjer mellemrum mellem elementer langs y-aksen.

Syntaks

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

Her repræsenterer 'y' 'y-aksen' eller 'lodret rum'. Sørg for at erstatte '' med en hvilken som helst reel værdi, såsom '5', '12' osv.

Eksempel: Anvendelse af lodret mellemrum mellem elementer i medvind

I dette eksempel har vi en flex container med nogle underordnede elementer i en kolonne. Vi vil bruge ' mellemrum-y-5 ' brugsklasse med '

' element for at tilføje lodret mellemrum mellem dets underordnede elementer:

< legeme >

< 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 >

< / legeme >

Her:

  • “ bøje ” klasse skaber et fleksibelt layout.
  • “ flex-col ” klasse justerer flex-emnerne i lodret retning (i en kolonne).
  • “ mellemrum-y-5 ” klasse tilføjer 5 enheder lodret afstand mellem flexelementer i en container.
  • “ m-10 ” klasse tilføjer en margen på 10 enheder til alle sider af containeren.
  • “ tekst-center ” klasse justerer teksten i beholderen til midten.

Produktion

Det lodrette mellemrum mellem flexelementerne er blevet anvendt effektivt.

Konklusion

For at tilføje det vandrette og lodrette mellemrum mellem elementer i Tailwind, ' mellemrum-x- ' og ' mellemrum-y- ” utility classes bruges med de ønskede elementer i HTML-programmet hhv. Disse klasser bruges normalt med flex- og gitterbeholdere til at kontrollere mellemrummet mellem deres underelementer. Denne artikel har eksemplificeret metoden til at anvende vandret og lodret mellemrum mellem elementer i Tailwind.

Andet

Kategori

Populære Indlæg

Discord Nitro: Er det det værd?

Hvad er Clear-Variable (Microsoft.PowerShell.Utility)?

Sådan kontrolleres en motorkondensator

Sådan får du klassenavn i JavaScript

Sådan installeres Starship Shell Prompt til Zsh på Mac?

Sådan installeres MySQL på macOS med Zsh

Sådan ændrer du størrelsen på EXT4-partitionen

Sådan tilpasses Windows File Explorer

Hvad er HTML DOM Element previousElementSibling Property i JavaScript

Hvad er forskellen mellem AWS Batch og Lambda?

Sådan fejlfindes Android GPS, der ikke fungerer

Tjek lytteporte på Linux

Hvordan oprettes forbindelse til Linux Instance ved hjælp af EC2 Instance Connect?

Sådan installeres KDE Plasma Desktop på Kali Linux

Sådan deaktiveres SELinux på Fedora Linux 39

Hvordan man opdrætter landsbyboere i Minecraft

Sådan genereres batterirapport på Windows 11

Hvordan tilføjer du en Dyno Bot i Discord?

Sådan implementeres et sundhedstjek med succes i Docker Compose

Microsoft Windows Search Indexer Høj CPU-brug Windows 10