静态无间距Bootstrap布局动态生成后出现垂直padding问题咨询

这个问题的核心原因是静态HTML与动态生成HTML的空白字符解析差异，具体细节如下：

1. 静态HTML的空白处理 #

你的静态代码中，两个.row元素之间的换行和空格属于HTML的“空白折叠”范畴——浏览器会将连续的空白字符（换行、空格、制表符等）合并成一个单一的空格，甚至在块级元素紧挨着的布局场景下，这个空白字符不会被渲染出可见的空间。再加上CSS中.row的margin折叠规则，静态渲染时两个box之间就不会出现明显间距。

2. 动态插入的空白问题 #

而你动态插入代码时，每个push的字符串开头都带有一个空格：

div.push(` <div class="row" style="border-style:solid;"> ... </div> `);

当你用div.join()（默认用空字符串连接）拼接这两个字符串后，最终插入的HTML会在两个.row之间形成一个单独的空格字符（即</div> <div class="row">）。这个空格字符会被浏览器解析为一个文本节点，在父元素#route（带有.small类）的字体大小不为0的情况下，这个文本节点会占据一定的垂直空间，看起来就像是两个box之间多了padding。

你可以根据自己的场景选择以下任意一种方案：

方案1：移除字符串中的前置空格 #

修改push的代码，去掉每个字符串开头的多余空格：

div.push(`<div class="row" style="border-style:solid;"> <div class="col-md-12 col-12"> <p>UpperBox</p> <p>UpperBox</p> <p>UpperBox</p> <p>UpperBox</p> </div> </div>`);
div.push(`<div class="row" style="border-style:solid;"> <div class="col-md-12 col-12"> <p>LowereBox</p> <p>LowereBox</p> <p>LowereBox</p> </div> </div>`);

这样拼接后，两个.row元素会紧挨着，不会产生多余的空白文本节点。

方案2：通过CSS消除空白字符的影响 #

给父元素#route添加CSS规则，让空白字符不占据空间：

#route {
  font-size: 0; /* 消除空白字符的渲染空间 */
}
/* 恢复内部文本的字体大小，匹配.small类的样式 */
#route p {
  font-size: 0.875rem; /* 可根据实际情况调整 */
}

方案3：使用DOM元素创建代替字符串拼接 #

完全避免HTML字符串拼接的空白问题，直接用JavaScript创建DOM元素：

// 封装创建row的函数
function buildRow(isUpper) {
  const row = document.createElement('div');
  row.classList.add('row');
  row.style.borderStyle = 'solid';

  const col = document.createElement('div');
  col.classList.add('col-md-12', 'col-12');

  const boxText = isUpper ? 'UpperBox' : 'LowereBox';
  const boxCount = isUpper ? 4 : 3;

  for (let i = 0; i < boxCount; i++) {
    const p = document.createElement('p');
    p.textContent = boxText;
    col.appendChild(p);
  }

  row.appendChild(col);
  return row;
}

// 插入到页面中
const routeContainer = document.getElementById('route');
routeContainer.appendChild(buildRow(true));
routeContainer.appendChild(buildRow(false));

这种方式不仅解决了空白问题，代码的可维护性也更高。

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