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

Question

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

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

在此处输入图像描述

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

score 2 · Accepted Answer

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

在此处输入图像描述

这是我使用的 CSS：

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

score -1 · Accepted Answer

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

<style>
html, body {

  margin: 0;
  padding: 0;

}
</style>

希望这有帮助。

2 回答 2