В Tailwind CSS, „ пространство между ” помощните програми се използват за контролиране на пространството между дъщерните елементи на flex или grid контейнери. Той предлага различни класове, като например “space-x-
Това ръководство ще илюстрира метода за използване на отрицателна стойност на пространството в Tailwind.
Как да използвате отрицателна стойност на пространството в Tailwind?
За да използвате стойност за отрицателно пространство в Tailwind, първо направете HTML структура. След това използвайте тирето „ – ” с желаното „интервал между” класове на полезност, за да го преобразувате в отрицателна стойност. „ -интервал-x-<стойност> ' и ' -интервал-y-<стойност> ” помощните програми често се използват за поставяне на един елемент в друг елемент.
Нека преминем през примерите по-долу, за да го разберем по-добре.
Пример 1: Прилагане на отрицателно хоризонтално разстояние между елементите
В този пример имаме гъвкав контейнер с някои дъщерни елементи в един ред. Ще използваме „ -интервал-x-8 ” за прилагане на отрицателното хоризонтално разстояние между гъвкавите елементи:
< тяло >< див клас = 'flex -space-x-8 m-10 h-20 w-max' >
< див клас = 'bg-teal-500 w-20 p-5 border-2 border-teal-800' > 1 див >
< див клас = 'bg-teal-500 w-20 p-5 border-2 border-teal-800' > 2 див >
< див клас = 'bg-teal-500 w-20 p-5 border-2 border-teal-800' > 3 див >
< див клас = 'bg-teal-500 w-20 p-5 border-2 border-teal-800' > 4 див >
< див клас = 'bg-teal-500 w-20 p-5 border-2 border-teal-800' > 5 див >
< див клас = 'bg-teal-500 w-20 p-5 border-2 border-teal-800' > 6 див >
див >
тяло >
Тук, в родителския елемент
-
- “ flex ” клас създава гъвкаво оформление.
- “ -интервал-x-8 ” клас добавя 8 единици отрицателно хоризонтално разстояние между гъвкавите елементи в контейнер.
- “ м-10 ” клас добавя поле от 10 единици към всички страни на контейнера.
- “ з-20 ” клас задава височината на контейнера на 20 единици.
- “ w-макс ” задава ширината на контейнера на максималната ширина на съдържанието.
В дъщерните
-
- “ bg-teal-500 ” клас задава фона на гъвкавите елементи на синьозелен.
- “ w-20 ” клас задава ширината на всеки гъвкав елемент на 20 единици.
- “ p-5 ” клас добавя 5 единици подложка към всички страни на всеки гъвкав елемент.
- “ граница-2 ” клас задава ширината на границата на контейнера на 2 единици.
- “ border-teal-800 ” клас прилага сив цвят към границата.
Изход
Горният резултат показва, че гъвкавите елементи се припокриват. Това показва, че стойността на отрицателното хоризонтално пространство е приложена успешно.
Пример 2: Прилагане на отрицателно вертикално разстояние между елементите
В този пример имаме гъвкав контейнер с някои дъщерни елементи в колона. Ще използваме „ -интервал-y-7 ” за прилагане на отрицателното вертикално разстояние между гъвкавите елементи:
< тяло >< див клас = 'flex flex-col -space-y-7 m-10 text-center' >
< див клас = 'bg-teal-500 p-5 border-2 border-teal-800' > 1 див >
< див клас = 'bg-teal-500 p-5 border-2 border-teal-800' > 2 див >
< див клас = 'bg-teal-500 p-5 border-2 border-teal-800' > 3 див >
< див клас = 'bg-teal-500 p-5 border-2 border-teal-800' > 4 див >
див >
тяло >
Тук:
-
- “ flex ” клас създава гъвкаво оформление.
- “ flex-col ” класът подравнява гъвкавите елементи във вертикална посока.
- “ -интервал-y-5 ” клас добавя 7 единици отрицателно вертикално разстояние между гъвкавите елементи в контейнер.
- “ м-10 ” клас добавя поле от 10 единици към всички страни на контейнера.
- “ текстов център ” клас подравнява текста на контейнера към центъра.
Изход
Вижда се, че гъвкавите елементи се припокриват. Това показва, че стойността на отрицателното вертикално пространство е приложена успешно.
Заключение
За да използвате отрицателна стойност за пространство в Tailwind, използвайте „ -интервал-x-<стойност> ' и ' -интервал-y-<стойност> ” помощни програми с желания гъвкав или мрежов контейнер в HTML структурата. Тези помощни програми често се използват за поставяне на един елемент в друг елемент. Това ръководство е илюстрирало метода за използване на отрицателна стойност на пространството в Tailwind.