为什么文本输入有额外的填充？

Question

我正在尝试在<input type="text">上叠加文字（对于跨浏览器placeholder支持）。我发现我的定位总是偏离几个像素，因为某种填充无法通过设置padding: 0;来删除。建议here和here无法解决问题。

您可以在Chrome的以下屏幕截图中看到此填充，作为蓝色突出显示和黄色边框之间的空白区域：

我怎样才能a）删除这个空间;或b）使用Javascript测量它？

Answer 1

如果您用自己的边框替换默认边框，则填充消失（至少对我来说，在Chrome / Mac上）：

这是我使用的CSS：

input {
    padding: 0;
    outline: none;
    border: 1px solid red;
}

http://jsfiddle.net/NZZ5B/

Answer 2

您需要重置所有内容。所以最好建议使用：

<style>
html, body {

  margin: 0;
  padding: 0;

}
</style>

希望这会有所帮助。