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)
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.