Мы рассчитали всё правильно, однако по три товара в строку не помещается.

Причина заключается в пробелах после тегов в HTML-коде. Блочно-строчные ведут себя как текст, поэтому если в коде есть пробел между элементами, то он отображается и на странице. Этот пробел увеличивает отступы между товарами, не давая им поместиться в одну строку.

Бороться с пробелом после блочно-строчных можно несколькими способами:

• удалять пробелы в коде;
• обнулять размер шрифта;
• играться с маргинами после блочно-строчного.

У каждого из способов есть свои недостатки, а подробнее эти и другие способы разбираются в нашем переводе хорошей статьи (есть ещё более обширная статья про блочно-строчные).

Мы попробуем последние два способа.

Способ со шрифтом заключается в том, что мы задаём нулевой размер шрифта у контейнера инлайн-блоков, а самим инлайн-блокам задаём исходный размер шрифта. Способ не работает, если вы используете относительные размеры шрифта.

Способ с маргинами заключается в том, что мы уменьшаем отступ после инлайн-блока на ширину пробела, около 4-5px. А если нам нужно, чтобы элементы стояли вплотную друг к другу, то задаём отрицательный отступ. Проблема с этим способом заключается в том, что размер пробела может быть разным в разных шрифтах и может изменяться при изменении размера шрифта.