В CSS Tailwind « пространство между Утилиты используются для управления пространством между дочерними элементами гибких или сетчатых контейнеров. Он предлагает различные классы, такие как «space-x-
В этом руководстве будет продемонстрирован метод использования отрицательного значения пробела в Tailwind.
Как использовать отрицательное значение пробела в Tailwind?
Чтобы использовать отрицательное значение пробела в Tailwind, сначала создайте структуру HTML. Затем используйте тире « – » с желаемым «пространством между» служебными классами, чтобы преобразовать его в отрицательное значение. « -space-x-<значение> ' и ' -space-y-<значение> Утилиты часто используются для размещения одного элемента внутри другого элемента.
Давайте рассмотрим приведенные ниже примеры, чтобы лучше понять это.
Пример 1. Применение отрицательного горизонтального интервала между элементами
В этом примере у нас есть гибкий контейнер с несколькими дочерними элементами подряд. Мы будем использовать « -пробел-x-8 ” для применения отрицательного горизонтального расстояния между гибкими элементами:
< тело >< div сорт '=' 'flex -space-x-8 м-10 ч-20 Вт-макс' >
< div сорт '=' 'bg-teal-500 w-20 p-5 border-2 border-teal-800' > 1 div >
< div сорт '=' 'bg-teal-500 w-20 p-5 border-2 border-teal-800' > 2 div >
< div сорт '=' 'bg-teal-500 w-20 p-5 border-2 border-teal-800' > 3 div >
< div сорт '=' 'bg-teal-500 w-20 p-5 border-2 border-teal-800' > 4 div >
< div сорт '=' 'bg-teal-500 w-20 p-5 border-2 border-teal-800' > 5 div >
< div сорт '=' 'bg-teal-500 w-20 p-5 border-2 border-teal-800' > 6 div >
div >
тело >
Здесь, в родительском элементе
-
- « гибкий Класс ” создает гибкий макет.
- « -пробел-x-8 » добавляет 8 единиц отрицательного горизонтального расстояния между гибкими элементами внутри контейнера.
- « м-10 Класс ” добавляет запас в 10 единиц со всех сторон контейнера.
- « ч-20 Класс » устанавливает высоту контейнера равной 20 единицам.
- « Вт-макс Класс » устанавливает ширину контейнера равной максимальной ширине содержимого.
В дочерних элементах
-
- « bg-чирок-500 Класс ” устанавливает бирюзовый фон гибких элементов.
- « w-20 Класс » устанавливает ширину каждого гибкого элемента равной 20 единицам.
- « р-5 Класс ” добавляет 5 единиц заполнения со всех сторон каждого гибкого элемента.
- « граница-2 Класс » устанавливает ширину границы контейнера равной 2 единицам.
- « граница-чирок-800 ” класс применяет бирюзовый цвет к границе.
Выход
Приведенный выше вывод показывает, что гибкие элементы перекрываются. Это указывает на то, что отрицательное значение горизонтального пространства было успешно применено.
Пример 2. Применение отрицательного вертикального расстояния между элементами
В этом примере у нас есть гибкий контейнер с некоторыми дочерними элементами в столбце. Мы будем использовать « -пробел-y-7 ” для применения отрицательного вертикального расстояния между гибкими элементами:
< тело >< div сорт '=' 'flex flex-col -space-y-7 m-10 текстовый центр' >
< div сорт '=' 'bg-teal-500 p-5 border-2 border-teal-800' > 1 div >
< div сорт '=' 'bg-teal-500 p-5 border-2 border-teal-800' > 2 div >
< div сорт '=' 'bg-teal-500 p-5 border-2 border-teal-800' > 3 div >
< div сорт '=' 'bg-teal-500 p-5 border-2 border-teal-800' > 4 div >
div >
тело >
Здесь:
-
- « гибкий Класс ” создает гибкий макет.
- « гибкий кол Класс ” выравнивает гибкие элементы в вертикальном направлении.
- « -пробел-у-5 Класс ” добавляет 7 единиц отрицательного вертикального расстояния между гибкими элементами внутри контейнера.
- « м-10 Класс ” добавляет запас в 10 единиц со всех сторон контейнера.
- « текстовый центр ” выравнивает текст контейнера по центру.
Выход
Видно, что гибкие элементы перекрываются. Это означает, что отрицательное значение вертикального пространства было успешно применено.
Заключение
Чтобы использовать отрицательное значение пробела в Tailwind, используйте « -space-x-<значение> ' и ' -space-y-<значение> » утилиты с нужным гибким или сеточным контейнером в структуре HTML. Эти утилиты часто используются для размещения одного элемента внутри другого элемента. В этом руководстве приведен пример метода использования отрицательного значения пространства в Tailwind.