В CSS Tailwind, набивка это пространство между содержимым определенного элемента и его границей. Горизонтальное заполнение это пространство слева и справа от элемента, тогда как вертикальное заполнение это пространство сверху и снизу элемента. Tailwind предлагает различные служебные классы для добавления горизонтального или вертикального отступа к нужным элементам.
Эта статья проиллюстрирует:
Как добавить горизонтальные отступы в Tailwind?
Чтобы добавить горизонтальный отступ к элементу в Tailwind, класс «px-
Синтаксис
< элемент сорт '=' 'пкс-0...' > ... элемент >
Здесь «px» представляет собой «ось x» или «горизонтальное дополнение».
Пример: применение горизонтального отступа к HTML-элементу
В этом примере мы будем использовать « px-20 » служебный класс с « <дел> », чтобы добавить к нему горизонтальный отступ:
< тело >
< див сорт '=' 'bg-pink-600 px-20 w-max' >
Прокладка в Попутный ветер CSS
див >
тело >
Выход
Приведенный выше вывод показывает заполнение левой и правой сторон контейнера. Это указывает на то, что горизонтальное заполнение было успешно применено к элементу-контейнеру.
Как добавить вертикальный отступ в Tailwind?
Чтобы добавить вертикальный отступ к элементу в Tailwind, используйте « ру-<значение> » служебный класс с определенным элементом в программе HTML. Этот класс добавляет отступы по оси Y, то есть как к верхней, так и к нижней сторонам элемента.
Синтаксис
< элемент сорт '=' 'ру-0...' > ... элемент >
Здесь «py» представляет собой «ось Y» или «вертикальное заполнение».
Пример. Применение вертикального отступа к HTML-элементу
В этом примере мы будем использовать « ру-20 » служебный класс с « <дел> », чтобы добавить к нему вертикальный отступ:
< тело >< див сорт '=' 'bg-pink-600 py-20 w-max' >
Прокладка в Попутный ветер CSS
див >
тело >
Выход
Приведенный выше вывод показывает заполнение верхней и нижней сторон контейнера. Это указывает на то, что вертикальное заполнение было эффективно применено к элементу-контейнеру.
Заключение
Чтобы добавить горизонтальное и вертикальное отступы в Tailwind, « px-<значение> ' и ' ру-<значение> Вспомогательные классы используются с нужными элементами в программе HTML соответственно. Пользователи могут указать разные значения для применения отступов слева и справа или сверху и снизу элемента. В этой статье проиллюстрирован полный метод применения горизонтального и вертикального заполнения в Tailwind.