дело в том, что
display: inline-block; добавляет после каждого такого блока пробел 3-4px (в зависимости от браузера).
есть 2 решения:
- использовать правило
margin-right: -3px - этот отрицательный отступ компенсирует те 3 пикселя, которые появляются. НО! В разных масштабах и в разных браузерах изначальный отступ в 3px может выглядеть шире/уже на пару пикселей и в итоге получим либо наезды блоков друг на друга, либо тот же самый перенос
- этот способ наиболее удобный. просто между блоками удалить все пробелы и переносы строк. т.е. закончился предыдущий div, и сразу же после закрывающего тега нужно вставлять следующий открывающий.
правильно:
</div><div> - в этом случае отступов не будет
не правильно:
</div> <div> - даже один символ отступа или переноса строки нарушит "хрупкое равновесие"
