Изучая, как использовать css-спрайты, я быстро заметил и/или прочитал, что лучше всего иметь 1 или 2 пустых пикселя между всеми изображениями внутри спрайта, чтобы избежать просачивания других изображений, когда пользователь увеличивает или уменьшает масштаб.
Глядя на домашнюю страницу Apple, я заметил, что они этого не делают, не страдая от кровоточащих изображений. Я не нашел в их css никакой причины, которая объясняла бы это.
Как это возможно? ;)
Нет необходимости в отступах между спрайтами, если вы точно знаете, какого размера будет содержащий элемент. Проблема возникает, когда что-то внутри элемента заставляет его расти. Например, если текст внутри этого элемента должен использовать резервный шрифт, это может привести к увеличению размера контейнера.
Причина, по которой рекомендуется использовать отступы между спрайтами, заключается в том, что в этом нет никаких недостатков. Он не увеличивает размер файла на сколько-нибудь значимую величину и дает вам небольшой запас прочности, когда браузер делает что-то немного отличающееся от того, что вы ожидаете.
Похоже, это действительно необходимо, потому что, когда браузер сочтет необходимым масштабировать обрезанные области (например, если увеличить или уменьшить масштаб или если анимация временно изменит размер), браузер будет использовать сглаживание, чтобы сгладить масштабированное изображение. . Поскольку при сглаживании используются окружающие пиксели, на самые внешние пиксели обрезки будут влиять те, которые лежат за пределами области обрезки. Прозрачное заполнение гарантирует, что этого не произойдет, поскольку прозрачное заполнение не повлияет на результирующий цвет. Без заполнения обрезанные изображения будут влиять друг на друга.
Это можно легко проверить, заполнив (теоретически невидимую) область отступа цветом, например, пурпурным, а затем увеличив или уменьшив масштаб на странице, все обрезки будут иметь немного пурпурного по краям.
