Tailwind CSS предоставя „ марж ” помощни класове, които позволяват на потребителите да контролират разстоянието около елементите. The хоризонтално поле добавя пространство от лявата и дясната страна на елемент, докато a вертикално поле добавя пространство в горната и долната част на елемент. Tailwind предлага различни класове на полезност за добавяне на хоризонтални или вертикални полета към желаните елементи.
Тази статия ще даде пример за:
Как да добавите хоризонтален марж в Tailwind?
За да добавите хоризонтално поле към елемент в Tailwind, полето „ mx-<стойност> ” се използва с желания елемент в HTML програмата. Потребителите могат да задават различни стойности за размера на маржа. Този клас добавя марж по оста x (дясна и лява страна).
Синтаксис
< елемент клас = 'mx-<стойност> ...' > ... елемент >
Тук „mx“ представлява „ос x“ или „хоризонтална граница“. Уверете се, че сте заменили „<стойност>“ с всяка валидна стойност, като например „5“, „14“ и т.н.
Пример: Прилагане на хоризонтално поле към HTML елемент
В този пример ще използваме „ mx-10 ” полезен клас с „ За да добавите вертикално поле към елемент в Tailwind, използвайте „ my-<стойност> ” помощен клас със специфичния елемент в HTML програмата. Този клас добавя поле по оста y (горната и долната страна). Синтаксис Пример: Прилагане на вертикално поле към HTML елемент В този пример ще използваме „ моят-10 ” полезен клас с „ За да добавите хоризонтално и вертикално поле в Tailwind, полето „ mx-<стойност> ' и ' my-<стойност> ” помощните класове се използват съответно с желаните елементи в HTML програмата. Потребителите могат да задават различни стойности, за да приложат марж отляво и отдясно или отгоре и отдолу на елемент. Това описание е илюстрирало метода за прилагане на хоризонтални и вертикални полета в Tailwind.
< тяло >
< див клас = 'h-screen mx-10 bg-purple-500' >
< стр клас = 'текст-5xl текстов център' > Марж в Попътен вятър CSS стр >
див >
тяло >
Изход 
Горният резултат показва полето от лявата и дясната страна на контейнера. Това показва, че хоризонталното поле е приложено успешно към контейнерния елемент. Как да добавите вертикално поле в Tailwind?
Тук 'my' представлява 'y-ос' или 'вертикален марж'. Уверете се, че сте заменили „<стойност>“ с всяка валидна стойност, като например „6“, „12“ и т.н.
< див клас = 'h-96 my-10 bg-purple-500' >
< стр клас = 'текст-5xl текстов център' > Марж в Попътен вятър CSS стр >
див >
тяло >
Изход 
Горният изход показва полето към горната и долната страна на контейнера. Това показва, че вертикалното поле е ефективно приложено към контейнерния елемент. Заключение