How do I stack buttons on top of each other [closed]

In a project that I’m currently working on, I need to stack several buttons on top of each other. The way that I want to stack them is so that there is no gap in between them. This is what I currently have:

This is what I want:

Is there a way to do this in CSS?

The code that I am using is a function which takes in a height and a width and makes a grid of buttons.

function createBoard (height, width)
{
    for (let h = 0; h < height; h++)
    {
        for (let w = 0; w < width; w++)
        {
            let button = document.createElement('button');
            button.setAttribute('class', 'pixel');
            document.body.appendChild(button)
            if (w == width - 1)
            {
                let br = document.createElement('br');
                document.body.appendChild(br)
            }
        }
    }
}

createBoard(5,10);

.pixel {
    margin:0;
    background-color: rgb(31, 31, 31);
    padding: 10px;
    display:inline-block;
    border: none;
}

.pixel:hover {
    background-color: rgb(73, 73, 73);
}

Answer

Here you go. I have adjusted your js to create rows of buttons and then those rows are added to container. Both rows and container have display: flex. You could ommit rows but it will be harder to create nice grid.

function createBoard (height, width)
{
    for (let h = 0; h < height; h++) {
        const row = document.createElement('div');
        row.classList.add('row');

        for (let w = 0; w < width; w++) {
            const button = document.createElement('button');
            button.classList.add('pixel');
            row.append(button);
        }

        document.querySelector('.container').append(row);
    }

}
createBoard(10, 10);

.container {
    display: flex;
    flex-direction: column;
}

.container .row {
    display: flex;
}

.container .row .pixel {
    margin: 0;
    background-color: rgb(31, 31, 31);
    padding: 10px;
    display: inline-block;
    border: none;
}

.container .row .pixel:hover {
    background-color: rgb(73, 73, 73);
}

<div class="container"></div>

other way will be to use grid, but you will have to specify width of pixel and use it to create your container grid

function createBoard (height, width)
{
    document.querySelector('.container').style.gridTemplateColumns = 'repeat('+width+', 20px)';
    for (let h = 0; h < height; h++) {
        for (let w = 0; w < width; w++) {
            const button = document.createElement('button');
            button.classList.add('pixel');
            document.querySelector('.container').append(button);
        }
    }

}
createBoard(10, 10);

.container {
    display: grid;
    flex-direction: column;
}
.container .pixel {
    margin:0;
    background-color: rgb(31, 31, 31);
    display:inline-block;
    border: none;
    width: 20px;
    height: 20px;
}

.container .pixel:hover {
    background-color: rgb(73, 73, 73);
}

<div class="container"></div>