Преглед садржаја
Брзе везе
Кључне Такеаваис
- ЦСС гап је свестрано својство које дефинише размак између елемената.
- гап је својство пречице које може узети две вредности за дефинисање празнина у редовима и колонама.
- гап се може користити са Флекбок, Грид и распоредима са више колона.
ЦСС нуди много начина за постављање елемената на ваше веб странице, од апсолутног позиционирања до дизајна заснованог на мрежи. Размак око и између елемената је једнако важан и, опет, постоји много опција. Својство празнина је користан и свестран начин увођења белог простора и ради са неколико различитих шема распореда.
Шта је јаз?
ЦСС гап је једноставно, али битно својство стила које помаже у дефинисању размака између изгледа дизајна. Давање простора својим елементима једно је од златних правила композиције које треба да примените за пријатан, ефектан графички дизајн.
Можете користити ово својство да одредите величину празнина између ставки у три формата изгледа:
Сви модерни претраживачи подржавају својство гап које допуњује својства модела оквира као што су маргина и паддинг.
Како написати својство ЦСС јаза
Основна синтакса за својство празнина је:
gap: <row-gap> <column-gap>;
Свака вредност може имати дужину или проценат, а размак у колони је опционо; без тога, једна вредност би важила и за редове и колоне. Тако:
gap: 10em;
…значи да ће и редови и колоне имати размак 10 пута већи од тренутне величине фонта, док:
gap: 20px 10%;
… ће произвести размак у редовима од 20 пиксела и размак у колони који је једна десетина ширине елемента који садржи.
Требало би да користите гап са елементима контејнера који дефинишу изглед, а не елементима унутар контејнера. Својство има за циљ да створи уједначен простор између ставки уместо сложенијег, променљивог размака.
Коришћење гапа са Флекбок-ом
Можете користити гап да контролишете простор између редова и колона које ствара флексибилни распоред. Смер савијања који користи ваш распоред ће одредити да ли се примењује празнина у редовима или колонама.
Подразумевано, у нормалном смеру реда, ставке унутар флексибилног контејнера ће се појавити једна поред друге. Дакле, овај једноставан ЦСС:
.flex-layout {
display: flex;
}.flex-layout div {
padding: 1em;
margin: 10px;
outline: 1px solid black;
}
Производи овај распоред:
Имајте на уму да свака ставка унутар контејнера користи класична својства модела оквира за размак: допуну и маргину. Додавање неке празнине:
.flex-layout { gap: 20px; }
Повећаће простор између флексибилних ставки, али не око њих:
Ако ваш флексибилни изглед приказује ставке и у колонама и у редовима — премотавањем ставки, на пример:
.flex-layout {
gap: 20px 40px;
flex-wrap: wrap;
}
Видећете ефекат обе празнине:
Увек имајте на уму да друга својства, као што су маргина и јустифи-цонтент, могу утицати на размак између ставки. Размак замислите као минималну вредност осим ако експлицитно не контролишете сва друга својства која могу утицати на размак.
Коришћење размака са мрежом
Такође можете користити празнину са распоредом мреже. Главна разлика је у томе што ћете обично желети да наведете празнине у редовима и колонама пошто је Грид погоднији за дводимензионалне распореде.
Као у Флек распореду, Грид ће подразумевано приказивати ставке једна поред друге, иако можете да контролишете размак око сваке ставке користећи паддинг и маргине:
.grid-layout {
display: grid;
grid-template-columns: 100px 80px 100px;
}.grid-layout div {
padding: 1em;
margin: 10px;
outline: 1px solid black;
}
Резултат је типичан распоред мреже:
Додавање празнине:
.grid-layout {
gap: 80px 40px;
}
Убациће размак између сваке ставке:
Обратите пажњу на то како се овде примењују појединачне вредности за размак између редова и колона, стварајући размак између редова који је двоструко већи (80 пиксела) од размака између колона (40 пиксела). Запамтите да, ако користите једну вредност, дефинисаћете исти јаз између редова и колона.
Коришћење празнине са распоредом са више колона
Својство гап можете користити и са распоредом колона, али само једна вредност је релевантна у овом случају; нема редова. Распореди са више колона имају подразумевани размак:
.column-layout {
column-count: 3;
}
Али је веома мали, величине 1 ем:
Ово је посебно приметно када мењате фонт и, посебно, ако оправдавате текст:
.column-layout {
font-size: 14pt;
line-height: 1.4;
text-align: justify;
}
Резултујући редови текста наилазе један на други и постају непријатни за читање:
Одређивањем размака, можете повећати размак између колона, дајући им више простора за дисање.
.column-layout {
gap: 2em;
}
Можда ћете открити да 2ем или чак 3ем даје читљивији резултат, у зависности од других фактора као што је ширина ваших колона:
Запамтите да можете да користите услужни програм за прегледач као што је Гоогле Цхроме алатке за програмере да бисте проверили своје изгледе и видели како својства као што су празнина и маргина утичу на ваше изгледе.
Када користите две вредности за празнину, проверите да ли их имате на прави начин. Редослед „ред, колона“ може бити неинтуитиван, али се подудара са редоследом других својстава пречица као што су паддинг и маргина.
Тачан начин на који ћете користити гап ће се разликовати у зависности од тога на коју шему распореда га примењујете. Међутим, генерално, требало би да посегнете за празнином када вам је потребан редован размак између ставки, али не око њих.