В Tailwind CSS, a марж се използва за контролиране на разстоянието около конкретния елемент. Добавя пространство между приложения елемент и околните елементи. Tailwind CSS предоставя набор от помощни програми за маржове и стойности за маржове, които позволяват на потребителите да персонализират разстоянието около желаните елементи. Освен това потребителите могат да добавят марж към една страна, като горната, долната, лявата или дясната част на определен елемент.
Този блог ще демонстрира примери за добавяне на поле към една страна на елемент в Tailwind CSS.
Как да добавите марж към една страна в Tailwind?
За да добавите поле към една страна на елемент в Tailwind, могат да се използват следните класове на помощ:
За да го разберете по-добре, прегледайте дадените по-долу примери.
Пример 1: Добавяне на поле към горната част на елемент
В този пример ще използваме „ mt-14 ” полезен клас в „ Изход Пример 2: Добавете марж в долната част на елемент В този пример ще използваме „ мб-14 ” клас в „ Пример 3: Добавете поле отляво на елемент В този пример ще използваме „ ml-14 ” клас в „ Пример 4: Добавяне на поле отдясно на елемент В този пример ще използваме „ мр-14 ” клас в „ За да добавите поле към една страна на елемент в Tailwind, могат да се използват различни класове на полезност, като например „ ml-<стойност> ”, “ mr-<стойност> ”, “ mt-<стойност> ', и ' mb-<стойност> ”. Тези класове добавят поле съответно към лявата, дясната, горната и долната страна на конкретния елемент. Потребителите могат да задават различни стойности за размера на маржа. Този блог демонстрира примери за добавяне на поле към една страна на елемент в Tailwind CSS.
< див клас = 'h-96 mt-14 bg-лилаво-500' >
< стр клас = 'текст-5xl текстов център' > Марж в Попътен вятър CSS стр >
див >
тяло >
Тук:
Горният резултат показва, че полето е добавено към горната част на контейнера.
< див клас = 'h-96 mb-14 bg-purple-500' >
< стр клас = 'текст-5xl текстов център' > Марж в Попътен вятър CSS стр >
див >
тяло >
Изход 
Може да се види, че полето е добавено към дъното на контейнера.
< див клас = 'h-96 ml-14 bg-лилаво-500' >
< стр клас = 'текст-5xl текстов център' > Марж в Попътен вятър CSS стр >
див >
тяло >
Изход 
Горният изход показва, че полето е добавено отляво на контейнерния елемент.
< див клас = 'h-96 mr-14 bg-purple-500' >
< стр клас = 'текст-5xl текстов център' > Марж в Попътен вятър CSS стр >
див >
тяло >
Изход 
Както можете да видите, полето е ефективно добавено вдясно на контейнера. Заключение