HTML Buttons has different margin between placing on HTML and being created by JavaScript-CodePudding

I has problem when I place buttons in HTML directly, they display extra margin. But when I create them with JavaScript code, they display without margin.

const div = document.createElement("div");
   const doneBtn = document.createElement("button");
   doneBtn.innerText = "Done";
   const delBtn = document.createElement("button");
   delBtn.innerText = "Delete";
   div.append(doneBtn);
   div.append(delBtn);
   document.body.append(div);

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Minimal Todo List</title>
  </head>
  <body>
    <div>
      <button>Done</button>
      <button>Delete</button>
    </div>
  </body>
</html>

How can I make the output consistently the same. (Setting "margin:0" won't work)

CodePudding user response：

You need to replace whitespaces in HTML or use proper CSS to remove the extra spaces. In JS, there are no extra spaces between buttons.