Овај блог ће пружити идеју о додељивању једнаког простора између више елемената у Таилвинд-у.
Како доделити једнак простор између више елемената у Таилвинд-у?
Корисници могу доделити једнаке размаке између елемената користећи „ размак-{к/и}-{величина} ” класа корисности. Корисници могу да додају простор на к или и оси тако што ће навести целобројну вредност. Услужни програм за размак је неопходан јер веб страницу чини привлачном. Ако веб страница нема одговарајући размак између елемената, неће привући кориснике.
Узмимо пример кода да доделимо једнак простор између елемената мреже.
Метод 1: Додела простора на Кс-оси.
Једнак простор додељен на к-оси чини једнак размак десно и лево од елемента. Да бисте доделили простор на к-оси користите следећу синтаксу:
простор - Икс - { величина }
Величина може бити било која целобројна вредност.
Узмите у обзир код испод да бисте доделили једнак простор на к-оси:
< тело >< див класа = 'мк-4 грид грид-цолс-4 спаце-к-4' >
< див класа = 'бг-греен-400 х-16 роундед-лг бордер-2 бордер-греен-800' > 1 див >
< див класа = 'бг-греен-400 х-16 роундед-лг бордер-2 бордер-греен-800' > 2 див >
< див класа = 'бг-греен-400 х-16 роундед-лг бордер-2 бордер-греен-800' > 3 див >
< див класа = 'бг-греен-400 х-16 роундед-лг бордер-2 бордер-греен-800' > 4 див >
див >
тело >
У овом коду:
- “ мк-4 ” додаје маргину од 4 пк на к-оси (десно и лево).
- „ грид ” класа креира мрежу.
- „ грид-цолс-4 ” направите 4 колоне у мрежи.
- „ простор-к-4 ” додаје размак од 4 пиксела између елемената мреже.
- “ бг-греен-400 ” поставља боју позадине на зелену.
- “ х-16 ” поставља висину на 16 пиксела.
- „ заобљен-лг ” чини угао округлим, а радијус границе је велики.
- „ граница-2 ” прави ивицу од 2 пиксела око елемента.
- “ граница-зелена-800 ” чини ивицу тамнозеленом.
Излаз
Прегледајте излаз креиран помоћу кода изнад:
Може се видети да је између елемената додељен размак од 4пк.
Метод 2: Додела простора на и оси.
Размак се може доделити на и-оси слично претходној методи, малим изменама у горњем коду. Додељује размаке дуж и-осе (горе и доле). Синтакса за то је:
Доњи код се може имплементирати за додавање размака дуж и-осе:
< тело >< див класа = 'мк-4 ми-4 спаце-и-4' >
< див класа = 'бг-греен-400 х-16 роундед-лг бордер-2 бордер-греен-800' > 1 див >
< див класа = 'бг-греен-400 х-16 роундед-лг бордер-2 бордер-греен-800' > 2 див >
< див класа = 'бг-греен-400 х-16 роундед-лг бордер-2 бордер-греен-800' > 3 див >
< див класа = 'бг-греен-400 х-16 роундед-лг бордер-2 бордер-греен-800' > 4 див >
див >
тело >
У овом коду:
- “ мк-4 ” додаје маргину од 4 пиксела са леве и десне стране елемената да би резултат био оптимизован.
- “ мој-4 ” додаје маргину од 4 пиксела на и оси (горе и доле).
- “ простор-и-4 ” додаје простор од 4 пиксела на и оси (горе и доле).
Излаз
Сачувајте горњи код и прегледајте веб страницу коју је креирао да бисте видели размак као:
То се односи на додељивање једнаког простора између елемената.
Закључак
Да би доделили једнак простор између више елемената у Таилвинд-у, корисници могу да користе „ размак-{к/и}-{величина} ” услужну класу и наведите целобројну вредност као величину према захтеву. Једнак размак између елемената чини излаз скалабилнијим и гледаоци остају ангажовани на веб страници. Овај пост је обезбедио метод за додељивање једнаког простора између више елемената у Таилвинд-у.