浏览器会自动为<input />元素添加间距，如何删除它们？

Question

以下是一个示例：http://jsfiddle.net/JPQxX/

我在Chrome和FF中试过这个。在两种浏览器中，两个输入之间的间隔为1-2px。我想触摸两个元素而不明确地将提交按钮向左移动。保证金已设为0px;

Answer 1

重置border样式，它应该有效http://jsfiddle.net/JPQxX/1/

input { border: 1px solid grey; }

Answer 2

元素确实触及，没有边距。如果您检查Firebug中的提交按钮元素，您将看到它没有边距，但边框宽度为3px。看似微不足道的是边界的一部分。如果你进行屏幕截图和放大，你可以看到边框有一个1px宽的灰色部分，每边有1px宽的透明部分，除了圆角外。

默认边框由浏览器中的内置例程绘制，现代浏览器倾向于使用这种例程。如果在CSS中为按钮设置边框属性，则浏览器倾向于切换到普通边框绘制，因此按钮停止看起来像普通按钮，并采用您设置的任何形状。我不认为你可以完全模拟默认的边框外观（只消除导致类似边缘现象的透明部分），但以下内容可能会让你足够接近（在支持浏览器上）：

input[type="submit"] {
    border: solid gray 1px;
    border-radius: 4px;
    background: #ddd;
}

演示：http://jsfiddle.net/m2CSy/