文本与SVG元素间距过大如何解决？技术求助

你的代码里有几个关键问题导致间距过大，以下是针对性修复方案：

1. 修正CSS属性拼写错误 #

你把margin拼写成了marging，这会导致外边距设置完全不生效，元素保留默认间距：

// 错误写法
l1.style.marging='0'
svg.style.marging='0'

// 正确写法
l1.style.margin='0'
svg.style.margin='0'

2. 优化Flex容器布局 #

给Flex容器添加gap: 0消除元素间的默认间隙，同时设置align-items: center让SVG和文本垂直对齐，避免因基线对齐产生的视觉间距：

fragment.style.display = 'flex'
fragment.style.gap = '0'
fragment.style.alignItems = 'center'

3. 清除元素内边距 #

给SVG和标签添加padding: 0，确保没有内部留白影响间距：

l1.style.padding = '0'
svg.style.padding = '0'

完整修复代码 #

var tick = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check-square-fill" viewBox="0 0 16 16"><path d="M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm10.03 4.97a.75.75 0 0 1 .011 1.05l-3.992 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.75.75 0 0 1 1.08-.022z"/></svg>'
var cross = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-exclamation-square-fill" viewBox="0 0 16 16"><path d="M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6 4c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995A.905.905 0 0 1 8 4zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/></svg>'

const fragment = document.createElement('span')
fragment.style.display = 'flex'
fragment.style.gap = '0'
fragment.style.alignItems = 'center'

const l1 = document.createElement("label")
l1.textContent = "HWjgvttgvyvytvhgvhgvhgvhtvytcytcytcytcytcyt";
l1.style.margin = '0'
l1.style.padding = '0'

const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.innerHTML = tick
svg.style.margin = '0'
svg.style.padding = '0'

fragment.appendChild(svg)
fragment.appendChild(l1)

document.body.appendChild(fragment);

补充说明 #

如果改用inline-block方案，需要给SVG设置vertical-align: middle对齐文本，同时要移除HTML结构中的换行空格（inline元素会将换行解析为空格），但Flex方案在间距控制上更简洁稳定。

内容的提问来源于stack exchange，提问作者Pierre Declercq