- Теория
- Теория
Верстаем список с margin
После того, как мы добавили в список ещё две карточки и разрешили многострочность, рядов стало два. При этом на втором ряду посередине образовалась «дырка».
![Рецепты на новогодние праздники](/assets/courses/365/img/coffee-5.jpg)
![Руководство по альтернативным способам заварки](/assets/courses/365/img/coffee-7.jpg)
Значение space-between
заставляет первую и последнюю карточки прижиматься к границам контейнера. Но если в ряду всего две карточки, то свободного пространства между ними оказывается слишком много.
Мы не можем задать разным рядам разное выравнивание, поэтому от space-between
придётся отказаться. Вместо него используем flex-start
, это значение по умолчанию. В результате карточки снова прижмутся к левой границе контейнера. А чтобы добавить между ними отступы, используем margin
.
Размеры отступов возьмём из макета:
![Макет списка карточек](/assets/courses/365/img/html2_6.jpg)
Изменим значение justify-content
, а после добавим карточкам внешний отступ справа, чтобы разделить их по горизонтали. Затем разделим их по вертикали, задав внешний отступ снизу.
.element {
margin-right: 20px;
margin-bottom: 10px;
}
- index.html
Вы перешли на другую страницу
Кликните внутри мини-браузера, чтобы поставить фокус в это окно.