为什么即使您将边距设置为 0px，CSS 也会在按钮之间放置间距

Question

我正在尝试制作一些彼此之间（垂直和水平）间距相等的按钮，但我遇到的问题是水平间距总是比我想要的大。这对我的项目来说不是一个大问题，但我仍然很好奇为什么 chrome 添加这个额外的 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>

这是在 chrome 中呈现的样子：

非常感谢任何帮助！

Answer 1

因为你的代码里面其实有一个space。解决此问题的两种方法。

去掉你实际代码中的白色space：

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

变成

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

或者 2. 在您的容器上设置 font-size:0。

为什么即使您将边距设置为 0px，CSS 也会在按钮之间放置间距

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

html

css

margin