Tailwind CSS — это хорошо известная структура, которая используется для создания настраиваемых и адаптивных веб-страниц или дизайнов. Это также позволяет пользователям управлять макетом и расстоянием между элементами без написания какого-либо пользовательского CSS. Отступы — это пространство между содержимым конкретного элемента и его границей. Иногда пользователи хотят применить одинаковое количество отступов к каждой стороне элемента. Tailwind предоставляет служебные классы для применения отступов ко всем сторонам элемента или к определенным сторонам, таким как верхняя, правая, нижняя или левая.
В этой статье будет показан метод добавления отступов со всех сторон элемента в Tailwind.
Как добавить отступы со всех сторон в Tailwind?
Чтобы добавить отступы со всех сторон определенного элемента в Tailwind, создайте структуру HTML. Затем используйте служебный класс «p-
Синтаксис
< элемент сорт '=' 'p-<значение>' ... элемент >
Замените «<значение>» на любое желаемое число, например 2, 4, 12, 20 и т. д.
Пример
В этом примере у нас есть два « <дел> », и мы применим два разных заполнения, т. е. « р-8 ' и ' р-14 ' на них:
< тело >
< див сорт '=' 'bg-pink-600 p-8 w-max' >
Прокладка в Попутный ветер CSS
див >
< бр >
< див сорт '=' 'бг-бирюзовый-600 р-14 ш-макс' >
Прокладка в Попутный ветер CSS
див >
тело >
Здесь, в первом
-
- “ бг-розовый-600 » задает розовый цвет для фона элемента .
- “ р-8 » добавляет 8 единиц заполнения ко всем сторонам контейнера.
- “ w-макс. » устанавливает ширину элемента
на максимальную ширину содержимого.Во втором
:-
- “ бг-бирюзовый-600 » задает бирюзовый цвет для фона элемента .
- “ р-14 » применяет 14 единиц заполнения ко всем сторонам контейнера.
- “ w-макс. » устанавливает ширину элемента
на максимальную ширину содержимого.Выход
Согласно приведенному выше выводу, указанное заполнение было применено ко всем сторонам обоих контейнеров.Заключение
Чтобы добавить отступы со всех сторон элемента в Tailwind, используется служебный класс «p-
» с нужным элементом в программе HTML. Пользователям необходимо указать конкретное значение, чтобы применить заполнение к элементу. Для проверки проверьте веб-страницу HTML и внесите изменения. В этой статье показан метод добавления отступов со всех сторон элемента в Tailwind.
- “ бг-бирюзовый-600 » задает бирюзовый цвет для фона элемента
- “ бг-розовый-600 » задает розовый цвет для фона элемента