ESG图标间距不一致：如何消除图标间的多余间隙？

我写了个生成ESG图标的parseESG函数，但生成的图标之间总有多余间隙，代码如下：

function parseESG(cellvalue, options, rowObject){ 
    var esgIcons = "";
    var esgValues = rowObject.EsgPillar;
    var esgArr;
    if(typeof esgValues === 'string'){
     esgArr = esgValues.split(",");
    }
    if(esgArr != undefined || esgArr != null){
        
        esgArr.forEach(function(element){
            if(element.trim() === "E"){
                esgIcons += '<img src ="../repo/app/img/pillars-environment.svg" title="'+environmental+'" style="margin-left: 1px;margin-right: 1px; width:20%"> ';
            }
            if(element.trim() === "S"){
                esgIcons += '<img src ="../repo/app/img/pillars-social.svg" title="'+social+'" style="margin-left: 1px;margin-right: 1px; width:20%">';
            }
            if(element.trim() === "G"){
                esgIcons += '<img src = "../repo/app/img/pillars-governance.svg" title="'+governance+'" style="margin-left: 1px;margin-right: 1px; width:20%">';
            }
            }
        );
        
    }
    return "<div style='text-align: center !important;'>"+esgIcons+"</div";
}

间隙产生的原因 #

1. img是行内块元素，浏览器会把拼接字符串里的空白（比如E图标后面多的那个空格、循环拼接时的隐性换行）当成间隙显示
2. 最后返回的div标签语法错误，少了闭合引号，可能导致渲染异常
3. 每个图标设置了左右1px的margin，再叠加行内空白，就会出现间距不一致的情况

修复方案 #

1. 修正HTML语法错误

返回语句里的"</div"要改成"</div>"，确保标签正确闭合：

return "<div style='text-align: center !important;'>"+esgIcons+"</div>";

2. 用Flex布局控制间距（最省心）

直接把容器改成Flex布局，用gap属性精准控制图标间的距离，不用再纠结margin和行内空白：

return "<div style='display: flex; justify-content: center; gap: 2px;'>"+esgIcons+"</div>";

可以删掉每个img里的margin-left和margin-right，间距全靠gap控制，稳定性更高。

3. 清理代码里的多余空白

比如E图标字符串末尾多了个空格，要删掉，避免拼接后产生额外空白：

// 原代码末尾有多余空格
esgIcons += '<img src ="../repo/app/img/pillars-environment.svg" title="'+environmental+'" style="margin-left: 1px;margin-right: 1px; width:20%"> ';
// 修改后去掉空格
esgIcons += '<img src="../repo/app/img/pillars-environment.svg" title="'+environmental+'" style="width:20%">';

4. 修正数组判断逻辑

原代码里if(esgArr != undefined || esgArr != null)逻辑错误，应该用&&，不然空数组也会进入循环，改成：

if(esgArr !== undefined && esgArr !== null && esgArr.length > 0){
    // 循环生成图标
}

5. 提前定义title变量

代码里用到的environmental、social、governance得提前定义好，不然鼠标hover时title会显示undefined。

修改后的完整代码 #

function parseESG(cellvalue, options, rowObject){ 
    var esgIcons = "";
    // 提前定义title文本，可根据实际需求修改
    var environmental = "环境";
    var social = "社会";
    var governance = "治理";
    var esgValues = rowObject.EsgPillar;
    var esgArr;
    if(typeof esgValues === 'string'){
     esgArr = esgValues.split(",");
    }
    // 修正数组判断逻辑，避免无效循环
    if(esgArr !== undefined && esgArr !== null && esgArr.length > 0){
        esgArr.forEach(function(element){
            var trimmedElement = element.trim();
            // 用else if优化判断逻辑
            if(trimmedElement === "E"){
                esgIcons += '<img src="../repo/app/img/pillars-environment.svg" title="'+environmental+'" style="width:20%">';
            } else if(trimmedElement === "S"){
                esgIcons += '<img src="../repo/app/img/pillars-social.svg" title="'+social+'" style="width:20%">';
            } else if(trimmedElement === "G"){
                esgIcons += '<img src="../repo/app/img/pillars-governance.svg" title="'+governance+'" style="width:20%">';
            }
        });
    }
    // Flex布局控制图标居中且间距一致
    return "<div style='display: flex; justify-content: center; gap: 2px;'>"+esgIcons+"</div>";
}

内容的提问来源于stack exchange，提问作者Jaya Kumari