Тази публикация разработва пълната процедура за добавяне на празнината между колоните в Tailwind.

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

За да добавите празнината между колоните в Tailwind, използвайте вградения „ празнина-{размер} ” помощна програма. Той определя цяло число, което представлява разстоянието между колоните хоризонтално и вертикално. Нека да направим тази задача практически с помощта на посочените примери.

Файлова структура на проекта
„ празнина-{размер} ” може да се внедри във всеки от проектите на Tailwind, които следват дадената файлова структура:

Да започнем с първия пример.

Пример 1: Използвайте помощната програма „gap-{size}“, за да добавите същата празнина между редове и колони
Този пример прилага помощната програма „gap-{size}“, за да добави същата празнина хоризонтално и вертикално между дадените колони.

HTML код
Преглед на следния код:

В горните кодови редове:

• Първо свържете основния CSS файл ' /dist/output.css ' със съществуващия HTML файл ' index.html ' използвайки ' <връзка> ” в секцията „глава”.
• След това секцията „тяло“ създава елемент „

  “, който използва „ Размер на шрифта ”, “ Тегло на шрифта ”, “ Подравняване на текст ”, “ Текстова декорация “, и „ Цвят на текста ” Класове по попътен вятър, съответно.

• След това се добавя елемент “
  ”, който прилага “ решетка ”, за да настроите съдържанието си в посочения брой оформления на мрежата, марж ”, за да зададете хоризонталното поле, и празнина ” помощна програма за добавяне на указаната празнина между колоните.
• В секцията за тяло на елемента “
  ” са включени още осем елемента “

  ”, които използват “ Ширина на границата “ и „ Цвят на рамката ” класове, съответно.

Изход
Изпълнете горния HTML код в живия сървър и анализирайте изхода:

Както се вижда, изходът добавя указаната празнина между колоните в двете измерения по подходящ начин.

Пример 2: Използвайте помощната програма „gap-{size}“, за да добавите независимо една празнина между редове и колони
„ празнина-{размер} ” помощната програма може също да се приложи с размери „x(horizontal)” и „y(vertical)” като „gap-x-{size}” за редове и „gap-y-{size}” за колони, за да добавите празнина между тях поотделно.

Да видим практическото му приложение.

HTML код
Разгледайте дадения код:

Тук „ празнина-x-{размер} ” помощната програма добавя празнината между редовете и празнина-y-{размер} ” добавя посочената празнина между колоните независимо.

Изход

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

Заключение

„Tailwind CSS“ предоставя вграден „ празнина-{размер} ” помощна програма за добавяне на празнината между колоните. Може също да се използва за добавяне на празнината между редове и колони отделно чрез „ празнина-x-{размер} “ и „ празнина-y-{размер} ” комунални услуги. Тази публикация предостави пълната процедура за добавяне на празнината между колоните в Tailwind.