Ответ 1
Хорошие новости! Существует стиль CSS, который направлен на решение этой точной проблемы. Он называется white-space-collapse, и он выглядит так в вашей таблице стилей:
#numberRow {white-space-collapse: discard;}
В браузерах, которые его поддерживают, это приведет к исключению пробела между тегами внутри <div>, если вокруг них нет других символов.
Теперь для плохих новостей... пока нет ни одного браузера, который его поддерживает.: (
Скорее движущиеся браузеры, вероятно, будут поддерживать его очень скоро - я готов поспорить, что он будет в Chrome, по крайней мере, к концу года - но это не будет достаточной поддержкой, чтобы сделать его достойным используя в течение некоторого времени.
В то же время, это общая проблема, которая вызывает множество дизайнеров сайтов.
Наиболее распространенным решением является простое удаление пробелов из исходного кода в соответствии с примером, который вы задали в вопросе. Его не идеально, но он решает проблему и без каких-либо грязных хаков.
Если вы настроены сохранить ваш исходный код в порядке (или вы просто не можете его избежать из-за используемой структуры или что-то еще), есть еще несколько хакерских решений:
Сначала нужно использовать замену строки Javascript, когда страница загружается, чтобы обрезать нежелательные пространства. Это беспорядочно, но работает, за исключением редкого случая, когда пользователь отключил javascript. Вы можете столкнуться с проблемами обновления страниц, поскольку сначала загружает один макет, а затем немедленно пересматривает себя на правильный макет, но он, вероятно, будет минимальным (в зависимости от скорости браузера и масштаба проблемы).
Даже более беспорядочное решение, но, несомненно, умный взлом, заключается в установке font-size:0; для родительского элемента (в вашем случае, <div>), а затем установите font-size обратно на правильный размер для элементов контента, например:
#numberRow {font-size:0;}
#numberRow>span {font-size:12px;}
(заменяя "12px" на любой размер, который вам захочется, конечно)
Недостатки этого: во-первых, это ужасный взлом; во-вторых, это ужасный взлом; и, в-третьих, это может затруднить управление размерами шрифтов, если вы используете и размерную структуру на основе em, а не шрифты с фиксированным размером пикселей. Но он работает.
В целом, моя рекомендация - пойти с легким ответом и удалить пробелы в вашем PHP-коде. По крайней мере, до тех пор, пока в большинстве браузеров не появится соответствующее решение CSS.
Надеюсь, что это поможет.