为什么即使您将边距设置为 0px，CSS 也会在按钮之间放置间距 [重复]答案

【问题标题】：why does CSS put spacing between buttons even if you set the margin to 0px [duplicate]为什么即使您将边距设置为 0px，CSS 也会在按钮之间放置间距 [重复]
【发布时间】：2020-11-22 09:08:20
【问题描述】：

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

<!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 中呈现时的样子：

非常感谢任何帮助！

【问题讨论】：

标签： html css margin

【解决方案1】：

因为您的代码中实际上有一个空格。解决此问题的两种方法。

删除实际代码中的空格：

<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。

【讨论】：