Hur lägger man till horisontellt och vertikalt mellanrum mellan element i medvind?

Hur Lagger Man Till Horisontellt Och Vertikalt Mellanrum Mellan Element I Medvind



Tailwind CSS tillhandahåller ' mellanrum mellan ” verktyg för att kontrollera utrymmet mellan flex- eller gallerbehållarens element. Den har olika klasser, såsom 'mellanslag-x-', 'mellanslag-y-', 'mellanslag-x-omvänd', 'mellanslag-y-omvänd', etc. Dessa verktyg lägger till horisontella och vertikalt utrymme mellan flex- eller gallerelement i behållaren.

Horisontellt utrymme är ett utrymme längs x-axeln mellan de underordnade elementen i en flex- eller gallerbehållare när de är ordnade i en rad. Vertikalt utrymme är ett utrymme längs y-axeln mellan de underordnade elementen i en flex- eller gallerbehållare när de är anordnade i en kolumn.

Den här artikeln kommer att visa:





Hur lägger man till horisontellt mellanrum mellan element i medvind?

För att lägga till horisontellt mellanrum mellan elementen i Tailwind, ' mellanslag-x- ” klass används med önskat element i HTML-programmet. Denna klass lägger till utrymme mellan element längs x-axeln.



Syntax



klass = 'mellanslag-x- ...'>... < / element>

Här representerar 'x' 'x-axeln' eller 'horisontellt utrymme'. Se till att ersätta '' med valfritt giltigt värde, till exempel '4', '10' osv.



Exempel: Tillämpa horisontellt mellanrum mellan element i medvind

I det här exemplet har vi en flexbehållare med några underordnade element. Vi kommer att använda ' space-x-8 ' nyttoklass med '

'-element för att lägga till horisontellt mellanrum mellan dess underordnade element:



< kropp >

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

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

< / div >

< / kropp >

Här, i det överordnade

-elementet:

  • ' böja ” klass skapar en flexibel layout.
  • ' space-x-8 ” klass lägger till 8 enheter horisontellt avstånd mellan flexelement i en container.
  • ' m-10 ” klass lägger till en marginal på 10 enheter på alla sidor av behållaren.
  • ' h-20 ” klass anger höjden på containern till 20 enheter.
  • ' w-max ”-klassen ställer in behållarens bredd till dess maximala innehållsbredd.

I de underordnade

-elementen:

  • ' bg-teal-500 ” klass ställer in bakgrunden för flexelement till teal.
  • ' w-20 ” klass anger bredden på varje flexartikel till 20 enheter.
  • ' p-5 ”-klassen lägger till 5 enheter stoppning på alla sidor av varje flexföremål.

Produktion

Ovanstående utdata indikerar att det horisontella utrymmet mellan flexelementet har applicerats framgångsrikt.

Hur lägger man till vertikalt mellanrum mellan element i medvind?

För att lägga till vertikalt mellanrum mellan elementen i Tailwind, ' mellanslag-y- ” klass används med det specifika elementet i HTML-programmet. Denna klass lägger till utrymme mellan element längs y-axeln.

Syntax

klass = 'mellanslag-y- ...' >...< / element>

Här representerar 'y' 'y-axeln' eller 'vertikal utrymme'. Se till att ersätta '' med valfritt verkligt värde, till exempel '5', '12' osv.

Exempel: Tillämpa vertikalt mellanrum mellan element i medvind

I det här exemplet har vi en flexbehållare med några underordnade element i en kolumn. Vi kommer att använda ' mellanslag-y-5 ' nyttoklass med '

'-element för att lägga till vertikalt mellanrum mellan dess underordnade element:

< kropp >

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

< / kropp >

Här:

  • ' böja ” klass skapar en flexibel layout.
  • ' flex-col ” klass justerar flexobjekten i vertikal riktning (i en kolumn).
  • ' mellanslag-y-5 ” klass lägger till 5 enheter vertikalt avstånd mellan flexelement i en container.
  • ' m-10 ” klass lägger till en marginal på 10 enheter på alla sidor av behållaren.
  • ' text-center ” klass justerar texten i behållaren till mitten.

Produktion

Det vertikala utrymmet mellan flexelementen har applicerats effektivt.

Slutsats

För att lägga till det horisontella och vertikala utrymmet mellan elementen i Tailwind, ' mellanslag-x- ' och ' mellanslag-y- ” verktygsklasser används med önskade element i respektive HTML-program. Dessa klasser används vanligtvis med flex- och rutnätsbehållare för att kontrollera utrymmet mellan deras underordnade element. Den här artikeln har exemplifierat metoden att applicera horisontellt och vertikalt mellanrum mellan element i Tailwind.

Övrig

Kategori

Populära Inlägg

SQL-fall med summan och grupp efter klausul

Hur man dockeriserar en Node.js-applikation

Vad är AWS Load Balancer och hur det fungerar

Hur man rullar till ett element med hjälp av JavaScript

Hur implementerar man numerisk integration i MATLAB?

Hur man känner till Windows 10-versionen

Allt om profilanpassning i Roblox

Ladda om den aktuella filen i Emacs

Viktiga Proxmox VE 8 PCI/PCIE Passthrough-justeringar, korrigeringar och lösningar

Pekare till Pekare i C++

[Del 3] Hur man använder AWS CLI för att hantera EC2-instanser

Vad betyder 'Ändringar inte iscensatta för commit'?

Hur man visar monteringar i Linux

Hur man automatiserar uppgifter med Python-skript

Hur man använder dubbelt mellanrum i Microsoft Word

Hur man sparsamt checkar ut endast en enda fil från ett Git-förråd?

Hur man använder Regex Whitespace i Java

Java TreeSet

Hur ställer jag in en bilds position i CSS?

Hur man blockerar appar på iPhone