DOM动态添加待办任务按钮间距不一致问题求助

问题根源很清晰：

• 模板里的按钮标签之间存在换行或空格，浏览器会把这些HTML空白解析成可见的空格；
• 动态添加按钮时，你是直接通过DOM方法创建并追加元素，中间没有插入空白文本节点，所以按钮是紧密挨在一起的。
  white-space: break-spaces只对HTML源码里的空白生效，动态创建的元素没有空白节点，自然不起作用。

给你两种可行的解决思路：

思路一：统一消除所有按钮间距 #

方法1：修改模板HTML #

把模板里的按钮标签连写，去掉中间的换行和空格：

<div class="taskElement">
  <span>模板任务</span>
  <button>编辑</button><button>删除</button>
</div>

方法2：用CSS清除空白影响 #

给父元素设置font-size: 0，再给子元素恢复字体大小，这样空白节点就不会被渲染：

.taskElement {
  font-size: 0;
}
.taskElement span, .taskElement button {
  font-size: 16px; /* 改成你实际使用的字体大小 */
}

思路二：统一给所有按钮添加间距（推荐） #

用CSS Flex布局的gap属性直接控制元素间距，不管HTML里有没有空白，都能让模板和动态元素保持一致：

.taskElement {
  display: flex;
  align-items: center; /* 让元素垂直居中，可选 */
  gap: 8px; /* 调整成你想要的间距大小 */
}

这种方式不需要修改HTML或动态创建的逻辑，是最简洁可靠的方案。

如果一定要用动态创建的方式添加空格，也可以在按钮之间插入空白文本节点：

function addTask(taskText) {
  const taskDiv = document.createElement('div');
  taskDiv.classList.add('taskElement');

  const taskSpan = document.createElement('span');
  taskSpan.textContent = taskText;
  taskDiv.appendChild(taskSpan);

  const editBtn = document.createElement('button');
  editBtn.textContent = '编辑';
  taskDiv.appendChild(editBtn);

  // 插入空白文本节点
  taskDiv.appendChild(document.createTextNode(' '));

  const deleteBtn = document.createElement('button');
  deleteBtn.textContent = '删除';
  taskDiv.appendChild(deleteBtn);

  // 把任务添加到页面容器里
  document.getElementById('taskList').appendChild(taskDiv);
}

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