O problema

Há um espaçamento padrão entre meus botões de edição e exclusão no HTML. No entanto, quando adiciono um novo item de lista com JavaScript que possui exatamente a mesma estrutura e nomes de classe, não há espaçamento entre esses botões.

Comportamento desejado Para que os botões anexados tenham a mesma aparência dos botões "padrão" na marcação HTML.

Codepen

HTML

            <ul id="list">
                <li class="item">
                    <div>Milk</div>
                    <button class="edit-button">edit</button>
                    <button class="delete-button">X</button>
                </li>
                <li class="item">
                    <div>Cheerios</div>
                    <button class="edit-button">edit</button>
                    <button class="delete-button">X</button>
                </li>
                <li class="item">
                    <div>Cheese</div>
                    <button class="edit-button">edit</button>
                    <button class="delete-button">X</button>
                </li>  
            </ul>

CSS

.title {
    text-align: center;
}

.main {
    border: 1px solid black;
    width: 50%;
    margin: auto;
}

#add-item {
    border: 1px solid black;
}

.input {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

.label {
    margin: 10px;
}

#list {
    flex-direction: column;
    display: flex;
}

#list > li{
    list-style-type: none;
    margin: 10px auto;
}

#list div {
    margin-bottom: 10px;
    text-align: center;
}

/* #list button {
    margin: 0px 4px;
} */

JavaScript

// TODO: Grab the list
const shoppingList = document.getElementById("list")
// TODO: Grab the input field
const titleInput = document.getElementById("title")
// TODO: Grab the buttons.
const submitButton = document.getElementById("submit-item")
// const editButtons = document.querySelectorAll(".edit-button")
// const delButtons = document.querySelectorAll(".delete-button")

// TODO: Add click event to the button.
submitButton.addEventListener('click', (e) => {
    e.preventDefault()
    addItem(titleInput.value)
});

// TODO: Create a function to add item.
    // ! Requirement: Must have:
    // !   - item text
    // !   - edit button
    // !   - delete button
    // !   - input field
    // ! Requirement: Add event listeners to buttons

    // TODO: Edit button must get pass the Parent node.

function addItem(title) {
    console.log("Running addItem")
    let newItem = document.createElement("li")
    newItem.classList.add("item")

    let newTitle = document.createElement("div")
    newTitle.textContent = title

    let editBtn = document.createElement("button")
    editBtn.classList.add("edit-button")
    editBtn.innerText = "edit"

    let delBtn = document.createElement("button")
    delBtn.classList.add("delete-button")
    delBtn.innerText = "X"

    editBtn.addEventListener('click', (e) => {
        console.log("Pressed the edit button", e)
        editItem(e.target.parentElement)
    });

    newItem.appendChild(newTitle)
    newItem.appendChild(editBtn)
    newItem.appendChild(delBtn)
    shoppingList.appendChild(newItem)
}


// TODO: Create a function to edit item.
    // ! Requirement: Parent Node (Element) parameter

    // TODO: Remove the Edit, Delete buttons.
    // TODO: Grab text content of the div and assign to variable.
    // TODO: Add an input element to the parent node.
    // TODO: Set input's value to the variable with the text content.
    // TODO: Add the save button.

function editItem(listItem) {
    let title;
    listItem.childNodes.forEach(element => {
        console.log(element.tagName)
        if(element.tagName === "DIV") {
            title = element.innerText
        }
    });

    listItem.innerHTML = ""

    let editInput = document.createElement("input")
    editInput.value = title

    let saveBtn = document.createElement("button")
    saveBtn.classList.add("save-button")
    saveBtn.innerText = "save"

    listItem.append(editInput, saveBtn)

    saveBtn.addEventListener('click', (e) => {
        saveItem(e.target.parentNode)
    });
}

// TODO: Create a function to save item.
    // ! Requirement: Parent Node (Element) parameter
    // TODO: Get the value of the input field and assign to variable
    // TODO: Remove the input and save button.
    // TODO: Create the div, edit, and delete buttons.
    // TODO: Set the div's text content to the variable with the input's value.
    // TODO: Add all those elements to the parent element.

function saveItem(listItem) {
    let titleEdit;

    listItem.childNodes.forEach(element => {
        if(element.tagName === "INPUT") {
            titleEdit = element.value
        }
    });

    listItem.innerHTML = "";

    let changedTitle = document.createElement("div");
    changedTitle.textContent = titleEdit;

    let editBtn = document.createElement("button");
    editBtn.classList.add("edit-button");
    editBtn.innerText = "edit";

    let delBtn = document.createElement("button");
    delBtn.classList.add("delete-button");
    delBtn.innerText = "X";

    listItem.appendChild(changedTitle);
    listItem.appendChild(editBtn);
    listItem.appendChild(delBtn);
}

// TODO: Create a function to delete item.
    // ! Requirement: Parent Node (Element) paramter
    // I believe you can figure this one out yourself. <3 :) 

O que eu tentei

• No entanto, adicionando estilo aos botões, ainda houve espaço reduzido entre os botões no item da lista anexado. (Eu esperava que talvez resolvesse o problema se os botões tivessem estilo aplicado, seria o espaçamento correto para todos eles. Os elementos HTML tinham 4px de espaçamento, mas parece que o elemento anexado tem espaçamento de 2px.)
• Verificou vários navegadores para ver se o navegador estava sendo renderizado de forma diferente, no entanto, o erro de espaçamento persistiu em todos os navegadores. (Eu esperava ver uma versão correta em um dos navegadores para identificar se era um problema de renderização entre navegadores.)
• Tentei uma redefinição de CSS, o resultado foi o espaçamento padrão entre os botões HTML e nenhum espaçamento entre os botões anexados. (Eu esperava que uma redefinição de CSS removesse todo o espaçamento entre os botões, mas parece que teve o efeito padrão mostrado no codepen.)
• Tentei colocar meu código em um ambiente CodePen e ainda tive o mesmo problema. (Eu esperava que funcionasse se houvesse um problema com meu ambiente local.)
• Verifiquei o código para talvez um espaço de carro/retorno e não encontrei nada. (Eu esperava que um espaço oculto pudesse ser a causa e removê-lo produziria os resultados desejados.)
• Até verifiquei com meu instrutor e eles também não têm certeza. (Eles me disseram para remover apenas os itens da lista padrão como uma solução alternativa, mas estou postando porque estou genuinamente curioso para saber por que isso está acontecendo.)

Artigos do StackOverflow que analisei (tentei vinculá-los, mas dizia que esses links faziam minha pergunta parecer "Spam" - então, aqui estão os títulos.)

Por que os estilos CSS iniciais não são visíveis no campo de estilo do elemento DOM?

Isso está falando sobre um problema ao acessar a propriedade CSS de um estilo, em vez de acessar as propriedades CSS totalmente renderizadas. Isso não é realmente aplicável, pois não há estilos por padrão neste exemplo.

Elemento anexado com estilos ausentes

Os estilos não faltam, eles são aplicados, mas o mesmo estilo é aplicado de forma diferente entre os elementos anexados.

Remova espaços em branco entre botões em HTML CSS

Fiz uma redefinição de CSS e o problema ainda estava acontecendo. Além disso, este é um espaçamento horizontal e não vertical.

Posso usar um DIV dentro de um item de lista?

Verificando se a estrutura HTML era válida e as especificações HTML dizem que posso ter divs e outros elementos de nível de bloco dentro do li.

O conteúdo anexado não obtém o efeito CSS adequado

Essa pessoa teve um problema em que o div foi anexado dentro do elemento UL e estava causando problemas. Este não é o meu problema.

Anexando elementos ao DOM com espaçamento de recuo

Esta questão específica estava tendo problemas com a estrutura HTML do DIV anexado que não estava no formato correto. Eu também não estou tendo esse problema. Minha estrutura HTML parece ser exatamente a mesma nas Ferramentas de Desenvolvimento.

Erro estranho ao anexar elementos em JavaScript

Este problema específico está encontrando um erro de tipo. Não há erros no console. Parece ser um bug estranho de formatação/CSS.

Nenhum desses artigos parecia aplicar-se a esta questão específica. Não tenho certeza se isso é um bug ou não, mas, considerando que se trata principalmente de um estilo padrão, persistente em todos os navegadores e persiste mesmo quando estilos são adicionados. Estou perdido.