why does CSS put spacing between buttons even if you set the margin to 0px

Question

I'm trying to make some buttons with equal spacing between each other (both vertically and hortizontally), but the problem I've encountered is that the horizontal spacing is always bigger than I want it to be. This is not a huge problem for my project, but I'm still curious as to why chrome adds this extra space.

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <button class="help-me-stack-overflow">button 1</button>
        <button class="help-me-stack-overflow">button 2</button><br>
        <button class="help-me-stack-overflow">button 3</button>
        <button class="help-me-stack-overflow">button 4</button>
        <style>
            .help-me-stack-overflow {
                width: 100px;
                height: 50px;
                margin: 0px;
            }
        </style>
    </body>
</html>

This is how it looks when rendered in chrome:

Any help is greatly appreciated!

score 1 · Accepted Answer · answered Nov 22 '20 at 00:55

Because there is actually a space in your code. Two ways to fix this.

Remove the whitespace in your actual code:

<button class="help-me-stack-overflow">button 1</button>
<button class="help-me-stack-overflow">button 2</button>

becomes

<button class="help-me-stack-overflow">button 1</button><button class="help-me-stack-overflow">button 2</button>

Or 2. set font-size:0 on your container.

why does CSS put spacing between buttons even if you set the margin to 0px

1 Answers1