为什么保证金：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）之间留出一些空间。在Firefox中，示例呈现为：

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

为什么开始有任何保证金，即使我明确设置了margin: 0;？

Answer 1

因为默认按钮是内联块元素，并且作为任何内联/内联块元素，它们都会尊重包含新行的空格。

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

Answer 2

inline和inline-block元素会发生这种情况。在换行符中添加空格。您应该从以下位置更改标记：

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

要

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

单行fiddle

Answer 3

作为变体，您可以写：

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