В Tailwind CSS, подплата е пространството между съдържанието на конкретния елемент и неговата граница. Хоризонтална подплата е пространството от лявата и дясната страна на елемента, докато вертикална подложка е пространството отгоре и отдолу на елемент. Tailwind предлага различни полезни класове за добавяне на хоризонтална или вертикална подложка към желаните елементи.
Тази статия ще илюстрира:
Как да добавите хоризонтална подложка в Tailwind?
За да добавите хоризонтална подложка към елемент в Tailwind, класът “px-
Синтаксис
< елемент клас = 'px-0 ...' > ... елемент >
Тук „px“ представлява „ос x“ или „хоризонтална подложка“.
Пример: Прилагане на хоризонтална подложка към HTML елемент
В този пример ще използваме „ px-20 ” полезен клас с „ За да добавите вертикална подложка към елемент в Tailwind, използвайте „ py-<стойност> ” помощен клас със специфичния елемент в HTML програмата. Този клас добавя подложка по оста y, т.е. към горната и долната страна на елемента. Синтаксис Пример: Прилагане на вертикална подложка към HTML елемент В този пример ще използваме „ py-20 ” полезен клас с „ За да добавите хоризонтална и вертикална подложка в Tailwind, полето „ px-<стойност> ' и ' py-<стойност> ” помощните класове се използват съответно с желаните елементи в HTML програмата. Потребителите могат да задават различни стойности, за да приложат подложка отляво и отдясно или отгоре и отдолу на елемент. Тази статия илюстрира пълния метод за прилагане на хоризонтална и вертикална подложка в Tailwind.
< тяло >
< див клас = 'bg-розово-600 px-20 w-max' >
Подложка в Попътен вятър CSS
див >
тяло >
Изход
Горният изход показва подложката от лявата и дясната страна на контейнера. Това показва, че хоризонталната подложка е приложена успешно към контейнерния елемент. Как да добавите вертикална подложка в Tailwind?
Тук 'py' представлява 'y-ос' или 'вертикална подложка'.
< див клас = 'bg-pink-600 py-20 w-max' >
Подложка в Попътен вятър CSS
див >
тяло >
Изход
Горният резултат показва подложката към горната и долната страна на контейнера. Това показва, че вертикалната подложка е ефективно приложена към контейнерния елемент. Заключение