Оглавление
Быстрые ссылки
Ключевые выводы
- CSS-зазор — это универсальное свойство, определяющее расстояние между элементами.
- разрыв — это свойство ярлыка, которое может принимать два значения для определения пробелов в строках и столбцах.
- разрыв можно использовать с макетами Flexbox, Grid и Multi-column.
CSS предлагает множество способов размещения элементов на ваших веб-страницах: от абсолютного позиционирования до дизайна на основе сетки. Расстояние вокруг и между элементами не менее важно, и опять же, существует множество вариантов. Свойство разрыва — это полезный и универсальный способ введения пробелов, который работает с несколькими различными схемами макета.
Что такое разрыв?
CSS Gap — это простое, но важное свойство стиля, помогающее определить расстояние между макетами вашего дизайна. Предоставление пространства вашим элементам — одно из золотых правил композиции, которое вы должны применять для создания приятного и эффективного графического дизайна.
Вы можете использовать это свойство, чтобы указать размер промежутков между элементами в трех форматах макета:
Все современные браузеры поддерживают свойство разрыва, которое дополняет такие свойства блочной модели, как поля и отступы.
Как написать свойство пробела CSS
Основной синтаксис свойства разрыва:
gap: <row-gap> <column-gap>;
Каждое значение может принимать длину или процентное значение, а пробел в столбце не является обязательным; без него одно значение применялось бы как к строкам, так и к столбцам. Так:
gap: 10em;
…означает, что и в строках, и в столбцах будет пробел, в 10 раз превышающий текущий размер шрифта, при этом:
gap: 20px 10%;
… создаст разрыв строки в 20 пикселей и пробел в столбце, равный одной десятой ширины содержащего элемента.
Вам следует использовать пробел с элементами контейнера, определяющими макет, а не с элементами внутри контейнера. Это свойство направлено на создание равномерного пространства между элементами, а не на более сложное переменное расстояние.
Использование пробела с Flexbox
Вы можете использовать пробел для управления пространством между строками и столбцами, создаваемыми гибким макетом. Гибкое направление, которое использует ваш макет, будет определять, будет ли применяться разрыв между строками или столбцами.
По умолчанию в обычном направлении строк элементы внутри гибкого контейнера будут отображаться рядом друг с другом. Итак, этот простой CSS:
.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;
}
Вы увидите эффект обоих пробелов:
Всегда помните, что другие свойства, такие как поля и justify-content, могут влиять на пространство между элементами. Думайте о зазоре как о минимальном значении, если только вы явно не контролируете все другие свойства, которые могут влиять на расстояние.
Использование пробела с сеткой
Вы также можете использовать пробел с макетом сетки. Основное отличие состоит в том, что обычно вам нужно указать пробелы как в строках, так и в столбцах, поскольку Grid больше подходит для двумерных макетов.
Как и в макете Flex, Grid по умолчанию отображает элементы рядом друг с другом, хотя вы можете контролировать расстояние вокруг каждого элемента, используя отступы и поля:
.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;
}
Но он очень маленький, размером 1em:
Это особенно заметно при изменении шрифта и особенно при выравнивании текста:
.column-layout {
font-size: 14pt;
line-height: 1.4;
text-align: justify;
}
Получившиеся строки текста наезжают друг на друга и читать становится неудобно:
Указав зазор, вы можете увеличить пространство между колоннами, давая им больше места для дыхания.
.column-layout {
gap: 2em;
}
Вы можете обнаружить, что 2em или даже 3em дают более читаемый результат, в зависимости от других факторов, таких как ширина ваших столбцов:
Помните, что вы можете использовать утилиту браузера, например, инструменты разработчика Google Chrome, чтобы проверить макеты и посмотреть, как такие свойства, как разрыв и поля, влияют на ваши макеты.
При использовании двух значений для пробела убедитесь, что они указаны правильно. Порядок «строка, столбец» может быть неинтуитивным, но он соответствует порядку других свойств ярлыка, таких как отступы и поля.
Точный способ использования пробела будет зависеть от того, к какой схеме макета вы его применяете. Однако в целом вам следует использовать пробел, когда вам нужно равномерное пространство между предметами, а не вокруг них.