Този блог ще предостави идея за определяне на равно пространство между множество елементи в Tailwind.
Как да зададете еднакво пространство между множество елементи в Tailwind?
Потребителите могат да задават равни интервали между елементите, като използват „ интервал-{x/y}-{размер} ” клас на полезност. Потребителите могат да добавят място по оста x или y, като посочат цяло число. Помощната програма за интервали е необходима, защото прави уеб страницата привлекателна. Ако уеб страницата няма подходящо разстояние между елементите, тя няма да привлече потребители.
Нека вземем пример за код, за да зададем равно пространство между елементите на мрежата.
Метод 1: Задаване на пространство по оста X.
Еднаквото пространство, зададено на оста x, прави еднакво разстояние отдясно и отляво на елемента. За да зададете интервал на оста x, използвайте следния синтаксис:
пространство - х - { размер }
Размерът може да бъде произволно цяло число.
Разгледайте кода по-долу, за да зададете равно пространство на оста x:
< тяло >< див клас = 'mx-4 grid grid-cols-4 space-x-4' >
< див клас = 'bg-green-400 h-16 rounded-lg border-2 border-green-800' > 1 див >
< див клас = 'bg-green-400 h-16 rounded-lg border-2 border-green-800' > 2 див >
< див клас = 'bg-green-400 h-16 rounded-lg border-2 border-green-800' > 3 див >
< див клас = 'bg-green-400 h-16 rounded-lg border-2 border-green-800' > 4 див >
див >
тяло >
В този код:
- “ mx-4 ” добавя поле от 4 px по оста x (отдясно и отляво).
- „ решетка ” клас създава решетка.
- „ grid-cols-4 ” направете 4 колони в мрежата.
- „ интервал-x-4 ” добавя 4px пространство между елементите на решетката.
- “ bg-green-400 ” задава цвета на фона на зелено.
- “ з-16 ” задава височината на 16px.
- „ заоблен-lg ” прави ъгъла кръгъл и радиусът на границата е голям.
- „ граница-2 ” прави рамка от 2 пиксела около елемента.
- “ граница-зелено-800 ” прави рамката тъмнозелена.
Изход
Визуализирайте изхода, създаден от горния код:
Може да се види, че между елементите е зададено разстояние от 4px.
Метод 2: Задаване на пространство по оста y.
Разстоянието може да бъде зададено на оста y, подобно на горния метод, чрез малки промени в горния код. Той присвоява интервали по оста y (отгоре и отдолу). Синтаксисът за него е:
Кодът по-долу може да се приложи за добавяне на интервали по оста y:
< тяло >< див клас = 'mx-4 my-4 space-y-4' >
< див клас = 'bg-green-400 h-16 rounded-lg border-2 border-green-800' > 1 див >
< див клас = 'bg-green-400 h-16 rounded-lg border-2 border-green-800' > 2 див >
< див клас = 'bg-green-400 h-16 rounded-lg border-2 border-green-800' > 3 див >
< див клас = 'bg-green-400 h-16 rounded-lg border-2 border-green-800' > 4 див >
див >
тяло >
В този код:
- “ mx-4 ” добавя поле от 4 пиксела отляво и отдясно на елементите, за да направи изхода по-оптимизиран.
- “ моят-4 ” добавя поле от 4px по оста y (отгоре и отдолу).
- “ пространство-y-4 ” добавя пространство от 4px по оста y (отгоре и отдолу).
Изход
Запазете горния код и визуализирайте създадената от него уеб страница, за да видите разстоянието като:
Това е всичко за определяне на равно пространство между елементите.
Заключение
За да зададете равно пространство между множество елементи в Tailwind, потребителите могат да използват „ интервал-{x/y}-{размер} ” полезен клас и задайте цяло число като размер според изискването. Еднаквото разстояние между елементите прави изхода по-мащабируем и зрителите остават ангажирани с уеб страницата. Тази публикация предостави метода за присвояване на равно пространство между множество елементи в Tailwind.