两个按钮之间的奇怪差距

Question

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

这是一个显示问题的小提琴.

从下图中可以看出,FireBug显示间隙既不是a margin或a padding(因为a padding会以紫色显示).

请注意:我在Windows 8.1上使用的是最新版本的Firefox,我也试过了Eric Mayer的CSS重置版,但差距仍然存在.

这不是一个非常重要的问题,但知道它是否正常以及它是什么原因会很好.

Answer 1

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

小提琴

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

如果您只想在这些buttons 之间显示一行,请添加margin: -1px.

小提琴

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

其他调整:

在Firefox中,当您单击按钮时,它会显示一个奇怪的虚线边框,如下所示:

小提琴

要摆脱这种情况,请将其添加到CSS中:

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

还有一件事(Firefox):当你点击按钮时,文字会移动.为了防止这种情况,请将其添加到CSS:

小提琴

button:active {
    padding: 0;
}

Answer 2

问题是在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>

2. 另一个是使用否定 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>

3. 最后但我完全不喜欢它是使用html注释作为间隙之间的间隔:

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

以上都可行.祝好运 :)