Как да добавите хоризонтална и вертикална подложка в Tailwind?

Kak Da Dobavite Horizontalna I Vertikalna Podlozka V Tailwind



В Tailwind CSS, подплата е пространството между съдържанието на конкретния елемент и неговата граница. Хоризонтална подплата е пространството от лявата и дясната страна на елемента, докато вертикална подложка е пространството отгоре и отдолу на елемент. Tailwind предлага различни полезни класове за добавяне на хоризонтална или вертикална подложка към желаните елементи.

Тази статия ще илюстрира:







Как да добавите хоризонтална подложка в Tailwind?

За да добавите хоризонтална подложка към елемент в Tailwind, класът “px-” се използва с желания елемент в HTML програмата. Потребителите могат да задават различни стойности за размера на подложката. Този клас добавя подложка по оста x, т.е. към лявата и дясната страна на елемента.



Синтаксис



< елемент клас = 'px-0 ...' > ... елемент >


Тук „px“ представлява „ос x“ или „хоризонтална подложка“.





Пример: Прилагане на хоризонтална подложка към HTML елемент

В този пример ще използваме „ px-20 ” полезен клас с „

”, за да добавите хоризонтална подложка към него:



< тяло >

< див клас = 'bg-розово-600 px-20 w-max' >
Подложка в Попътен вятър CSS
див >

тяло >


Изход


Горният изход показва подложката от лявата и дясната страна на контейнера. Това показва, че хоризонталната подложка е приложена успешно към контейнерния елемент.

Как да добавите вертикална подложка в Tailwind?

За да добавите вертикална подложка към елемент в Tailwind, използвайте „ py-<стойност> ” помощен клас със специфичния елемент в HTML програмата. Този клас добавя подложка по оста y, т.е. към горната и долната страна на елемента.

Синтаксис

< елемент клас = 'py-0 ...' > ... елемент >


Тук 'py' представлява 'y-ос' или 'вертикална подложка'.

Пример: Прилагане на вертикална подложка към HTML елемент

В този пример ще използваме „ py-20 ” полезен клас с „

”, за да добавите вертикална подложка към него:

< тяло >

< див клас = 'bg-pink-600 py-20 w-max' >
Подложка в Попътен вятър CSS
див >

тяло >


Изход


Горният резултат показва подложката към горната и долната страна на контейнера. Това показва, че вертикалната подложка е ефективно приложена към контейнерния елемент.

Заключение

За да добавите хоризонтална и вертикална подложка в Tailwind, полето „ px-<стойност> ' и ' py-<стойност> ” помощните класове се използват съответно с желаните елементи в HTML програмата. Потребителите могат да задават различни стойности, за да приложат подложка отляво и отдясно или отгоре и отдолу на елемент. Тази статия илюстрира пълния метод за прилагане на хоризонтална и вертикална подложка в Tailwind.