两个按钮之间的奇怪间隙[重复]

Question

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

这是一个fiddle，它显示了问题。

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

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

这不是一个真正重要的问题，但如果知道它是否正常以及是什么原因造成的，那就太好了。

Answer 1

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

1. 对父容器使用font-size: 0（你必须为子元素定义字体大小）：

.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;
}

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

1. 另一种是使用负数margin-left: -4px

.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;
}

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

1. 最后但我一点也不喜欢它是使用 html cmets 作为分隔符 间隙之间：

.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;
}

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

以上都行。祝你好运:)

Answer 2

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

Fiddle

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

---

如果您只想在这些buttons 之间显示一行，请添加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 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>

或者按照 cmets 的建议：

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

Answer 5

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

jsfiddle