Tailwind CSS предоставляет « допуск » служебные классы, которые позволяют пользователям управлять расстоянием между элементами. горизонтальное поле добавляет пространство слева и справа от элемента, тогда как вертикальное поле добавляет пространство вверху и внизу элемента. Tailwind предлагает различные служебные классы для добавления горизонтальных или вертикальных полей к нужным элементам.
Эта статья будет примером:
Как добавить горизонтальное поле в Tailwind?
Чтобы добавить горизонтальное поле к элементу в Tailwind, кнопка « mx-<значение> ” используется с нужным элементом в программе HTML. Пользователи могут указать различные значения размера поля. Этот класс добавляет поле вдоль оси x (правая и левая стороны).
Синтаксис
< элемент сорт '=' 'mx-<значение>...' > ... элемент >
Здесь «mx» представляет собой «ось X» или «горизонтальное поле». Обязательно замените «<значение>» любым допустимым значением, например «5», «14» и т. д.
Пример: применение горизонтального поля к элементу HTML
В этом примере мы будем использовать « мх-10 » служебный класс с « <дел> », чтобы добавить к нему горизонтальное поле:
< тело >
< див сорт '=' 'h-screen mx-10 bg-purple-500' >
< п сорт '=' 'текст-5xl текст-центр' > Допуск в Попутный ветер CSS п >
див >
тело >
Выход
Приведенный выше вывод показывает поля слева и справа от контейнера. Это указывает на то, что горизонтальное поле было успешно применено к элементу-контейнеру.
Как добавить вертикальное поле в Tailwind?
Чтобы добавить вертикальное поле к элементу в Tailwind, используйте « мой-<значение> » служебный класс с определенным элементом в программе HTML. Этот класс добавляет поле по оси Y (сверху и снизу).
Синтаксис
< элемент сорт '=' 'мое-<значение>...' > ... элемент >
Здесь «мой» представляет «ось Y» или «вертикальное поле». Обязательно замените «<значение>» любым допустимым значением, например «6», «12» и т. д.
Пример. Применение вертикального поля к HTML-элементу
В этом примере мы будем использовать « мой-10 » служебный класс с « <дел> », чтобы добавить к нему вертикальное поле:
< тело >< див сорт '=' 'ч-96 ми-10 бг-фиолетовый-500' >
< п сорт '=' 'текст-5xl текст-центр' > Допуск в Попутный ветер CSS п >
див >
тело >
Выход
Приведенный выше вывод показывает отступ от верхней и нижней сторон контейнера. Это указывает на то, что вертикальное поле было эффективно применено к элементу-контейнеру.
Заключение
Чтобы добавить горизонтальное и вертикальное поле в Tailwind, « mx-<значение> ' и ' мой-<значение> Вспомогательные классы используются с нужными элементами в программе HTML соответственно. Пользователи могут указать разные значения для применения полей слева и справа или сверху и снизу элемента. Эта статья иллюстрирует метод применения горизонтальных и вертикальных полей в Tailwind.