CSS循环地图绘制优化咨询及拆分图片间隙消除方法

一、循环地图的更优绘制方案 #

针对你这种除首尾区块外、每8个区块为一组重复的循环地图，相比单独给每个元素设置background-position，可以试试这些更高效的思路：

• CSS变量+批量计算定位：先把单个区块的宽高定义为CSS变量，比如--block-width: 60px; --block-height: 60px;。对中间的重复组元素，利用calc()和模运算（%）自动计算背景位置，比如第n个元素（从0计数）可以写：background-position: calc((var(--index) % 8) * -var(--block-width)) 0;，首尾区块单独指定样式即可。如果用Sass/LESS这类预处理器，还能通过循环批量生成选择器，不用手动逐个写样式。
• CSS Grid/Flexbox管理布局：用Grid或Flex来统一排列所有区块，不用手动调整每个元素的位置。比如用Grid的话，设置好列数后，重复组的区块直接复用同一个类，首尾区块用单独类覆盖样式，能大幅减少冗余代码。
• 规整Sprite图结构：如果用背景Sprite图，把重复组的8个区块按一行或一列规整排列，这样计算位置时更直观，避免因布局混乱导致的定位错误。

二、span元素间隙的解决办法 #

span属于行内元素，你遇到的间隙是HTML代码里的换行、空格导致的，用margin无法消除，试试这几个直接有效的方法：

• 父容器设置font-size: 0：给span的父元素添加font-size: 0;，再给span单独设置需要的font-size，行内元素的空白间隙会直接消失。
• 改用Flex布局：把父容器设置为display: flex;，Flex布局默认会消除子元素间的行内空白间隙，还能方便控制排列方向和对齐方式，比手动调margin更可靠。
• 移除HTML中的空白字符：把所有span标签写在同一行（比如<span>区块1</span><span>区块2</span>），去掉标签之间的换行和空格，也能消除间隙，但这种方法维护起来麻烦，不如前两种灵活。

内容的提问来源于stack exchange，提问作者Lobanov Ivan