# Отступы в плиточке с автошириной блоков в CSS

Пусть у нас есть плиточка по четыре блока в ряд:

`.child { width: 25%; }`

Давайте добавим нашим блокам отступы в процентах по горизонтали и по вертикали:

`.child { margin-right: 1.5%; margin-bottom: 1.5%; } .child:nth-child(4n) { margin-right: 0; }`

Пока то, что мы сделали, будет работать некорректно, так как суммарная ширина блоков и отступов больше `100%`. Для корректной работы мы должны от каждого блока откусить некоторый кусочек, чтобы было место под наши отступы. Давайте вычислим эти кусочки.

В нашем случае получается, что блоков четыре, а между ними три отступа - по полтора процента. Чтобы вычислить отнимаемый кусочек, нужно суммарный отступ поделить на количество блоков:

``1.5%` * `3` / `4` = `1.125``

Тогда ширина каждого блока будет равна:

``25%` - `1``.5%` * `3` / `4` = `23.875%``

Получится следующий код:

`.child { width: 23.875%; margin-right: 1.5%; margin-bottom: 1.5%; } .child:nth-child(4n) { margin-right: 0; }`

Можно не вычислять этот отступ самим, а переложить работу по вычислению на функцию `calc`:

`.child { width: calc(25% - 1.5% * 3 / 4); margin-right: 1.5%; margin-bottom: 1.5%; } .child:nth-child(4n) { margin-right: 0; }`

Ширину блока также пусть вычисляет функция `calc`:

`.child { width: calc(100% / 4 - 1.5% * 3 / 4); margin-right: 1.5%; margin-bottom: 1.5%; } .child:nth-child(4n) { margin-right: 0; }`

Задайте блокам ширину в процентах так, чтобы в плитке стало три блока в ряд, а между ними расстояние в `3%`.

Задайте блокам ширину в процентах так, чтобы в плитке стало шесть блоков в ряд, а между ними расстояние в `0.5%`.

Задайте блокам ширину в процентах так, чтобы в плитке стало четыре блока в ряд, а между блоками было расстояние в `30px`.

Задайте блокам ширину в процентах так, чтобы в плитке стало пять блоков в ряд, а между блоками было расстояние в `50px`.

← →
↑