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

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

html css

Html 为什么CSS会在按钮之间设置间距，即使您将边距设置为0px,html,css,margin,Html,Css,Margin,我试图使一些按钮之间的间距相等（垂直和水平），但我遇到的问题是，水平间距总是比我想要的大。这对我的项目来说不是一个大问题，但我仍然很好奇为什么chrome会增加这个额外的空间 <!DOCTYPE html> <html> <head> </head> <body> <button class="help-me-stack-overflow">button 1<

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


按钮1
按钮2

按钮3
按钮4
.帮我叠一下{
宽度：100px；
高度：50px；
边际：0px；
}

这是在chrome中渲染时的外观：

非常感谢您的帮助

因为代码中实际上有一个空格。有两种方法可以解决这个问题

删除实际代码中的空白：

按钮1
按钮2

变成

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

按钮1按钮2

或2。在容器上设置

字体大小：0

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