两个按钮之间的奇怪差距

Question

我遇到了HTML button标记的奇怪行为。似乎当我并排放置两个按钮时，它们之间会出现4px间隙，无处不在。

这是显示问题的fiddle。

从下图中可以看出，FireBug显示间隙既不是margin也不是padding（因为padding将显示为紫色）。

请注意：我在Windows 8.1上使用的是最新版本的Firefox，我也尝试使用Eric Mayer的CSS重置版，但差距仍然存在。

这不是一个非常重要的问题，但知道它是否正常以及导致它的原因会很好。

Answer 1

这是因为button元素之间有空格。将您的HTML更改为：

Fiddle

<div class="buttons">
    <button>Button1</button><button>Button2</button>
</div>

---

如果您只想在这些button之间显示一行，请添加margin: -1px。

Fiddle

button {
    background-color: transparent;
    border: 1px solid dimgray;
    width: 150px;
    height: 40px;
    margin: -1px;
    cursor: pointer;
}

---

其他调整：

在Firefox中，当您点击某个按钮时，它会显示一个奇怪的虚线边框，如下所示：

Fiddle

要摆脱这种情况，请将其添加到CSS：

button::-moz-focus-inner {
    border: 0;
}

---

还有一件事（Firefox）：当你点击按钮时，文字会移动。为了防止这种情况，请将其添加到CSS中：

Fiddle

button:active {
    padding: 0;
}

Answer 2

问题是在inline-block元素中，HTML中的空格成为屏幕上的可视空间。解决它的一些解决方案：

1. 将font-size: 0用于父容器（您必须为子元素定义font-size）：
＆＃13;
＆＃13;
.buttons {
  width: 304px;
  margin: 0 auto;
  z-index: 9999;
  margin-top: 40px;
  font-size: 0;
}
button {
  background-color: transparent;
  border: 1px solid dimgray;
  width: 150px;
  height: 40px;
  cursor: pointer;
}
＆＃13;
<div class="buttons">
  <button>Button1</button>
  <button>Button2</button>
</div>
＆＃13;
＆＃13;
＆＃13;
1. 另一个是使用否定margin-left: -4px
＆＃13;
＆＃13;
.buttons {
  width: 304px;
  margin: 0 auto;
  z-index: 9999;
  margin-top: 40px;
}
button {
  background-color: transparent;
  border: 1px solid dimgray;
  width: 150px;
  height: 40px;
  cursor: pointer;
  margin-left: -4px;
}
＆＃13;
<div class="buttons">
  <button>Button1</button>
  <button>Button2</button>
</div>
＆＃13;
＆＃13;
＆＃13;
1. 最后但我完全不喜欢使用html评论作为间隔符 差距之间：
＆＃13;
＆＃13;
.buttons {
  width: 304px;
  margin: 0 auto;
  z-index: 9999;
  margin-top: 40px;
}
button {
  background-color: transparent;
  border: 1px solid dimgray;
  width: 150px;
  height: 40px;
  cursor: pointer;
}
＆＃13;
<div class="buttons">
  <button>Button1</button><!--
 --><button>Button2</button>
</div>
＆＃13;
＆＃13;
＆＃13;

以上都可行。祝你好运：）

Answer 3

可以通过

更正

button {
    background-color: transparent;
    border: 1px solid dimgray;
    width: 150px;
    height: 40px;
    cursor: pointer;
    float:left;
}

Answer 4

正如其他人所说，它是你元素之间的空白。如果你正在使用PHP，你可以这样做：

<div class="buttons">
    <button>Button1</button><?php
    ?><button>Button2</button>
</div>

否则，你可以这样做：

<div class="buttons">
    <button>Button1</button><
     button>Button2</button>
</div>

或者，正如评论中所建议的那样：

<div class="buttons">
    <button>Button1</button><!--
    --><button>Button2</button>
</div>

Answer 5

如果您float: right;或float: left;，您将看不到空格。

jsfiddle