为什么 margin:0 对按钮不起作用？

Question

我希望两个按钮并排显示，中间没有边框。这些按钮是：

<button class="tButton">1</button> 
<button class="tButton">2</button>

我对 css 的天真做法是：

.tButton {
    width: 50px;
    height: 50px;
    margin:0px;
    padding: 0px;
    background-color: gray;
    border: none;
}

但这会在按钮 (JSFiddle) 之间留下一些 space。在 Firefox 中，示例呈现为：

当我在按钮上使用 float: left; 时，这个问题就消失了。但我想了解以下关于 CSS 的内容：

即使我明确设置了 margin: 0;，为什么开头还有空白？

Answer 1

因为默认情况下按钮是行内块元素，并且与任何 inline/inline-block 元素一样，它们尊重空格，包括新行。

因此，将按钮放在同一行可以消除间隙：

.tButton {
    width: 50px;
    height: 50px;
    margin:0px;
    padding: 0px;
    background-color: gray;
    border: none;
}

<button class="tButton">1</button><button class="tButton">2</button>

以及使它们 float: left 因为在这种情况下按钮变成浮动的块级元素。

Answer 2

这发生在 inline 和 inline-block 元素上。 space 被添加到换行符中。您应该更改您的标记，来自：

<button class="tButton">1</button>
<button class="tButton">2</button>

到

<button class="tButton">1</button><button class="tButton">2</button>

Answer 3

作为变体，您可以这样写：

<button class="tButton">1</button
><button class="tButton">2</button>

Answer 4

主体仍然是“BIG DIV”，需要将边距设置为零并给出 display:flex; 以便其容器上的项目将一个堆叠到另一个内联。我在 https://jsfiddle.net/83a2Lou0/ 中检查了您的代码，在您看到更改的效果之前需要先保存它。

我在代码笔中复制了你的相同代码，更改会自动保存。只需将此添加到您的 CSS:

body{
margin: 0;
display: flex;
}
.tButton {
/* The same properties and values you have here. */

就是这样。在这里检查相同的编码： https://codepen.io/limakid/pen/KKQRdXK

Why does margin:0 not work on buttons?