奇怪的两个按钮之间的差距
这个问题在这里已经有了答案：
问题在于， inline-block元素中，HTML中的空白变成了屏幕上的可视空间。 一些解决方案来解决它：
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> 这是因为你在button元素之间有空格。 将您的HTML更改为：
小提琴
<div class="buttons">
<button>Button1</button><button>Button2</button>
</div>
如果您只想在这些button之间显示一行，请添加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;
}
它可以通过修正
button {
background-color: transparent;
border: 1px solid dimgray;
width: 150px;
height: 40px;
cursor: pointer;
float:left;
}