# Вертикальные отступы для плиточки в CSS

Давайте теперь добавим еще и вертикальные отступы. Для этого всем потомкам зададим `margin-bottom` в значении `10px`:

`<div class="parent"> <div class="child">1</div> <div class="child">2</div> <div class="child">3</div> <div class="child">4</div> <div class="child">5</div> <div class="child">6</div> <div class="child">7</div> <div class="child">8</div> </div>` `.parent { display: flex; flex-wrap: wrap; width: 320px; border: 1px solid red; } .child { box-sizing: border-box; width: 100px; height: 100px; margin-right: 10px; margin-bottom: 10px; border: 1px solid green; } .child:nth-child(3n) { margin-right: 0; }`

:

Как мы видим, все работает хорошо, за исключением того, что последний ряд отступает от родителя. Чаще всего это не критично.

Сделайте плиточку по два элемента в ряд с расстоянием между элементами в `20px`.

Сделайте плиточку по три элемента в ряд с расстоянием между элементами в `20px`.

Сделайте плиточку по четыре элемента в ряд с расстоянием между элементами в `20px`.

← →
↑