javascript - 为什么文本框和周围跨度之间存在高度差异？

Question

为什么在给定以下 html 的情况下报告元素高度存在差异？

<span id="spanner" style="margin:0;padding:0;border:0;outline:0;"><input type="text" /></span>

当您询问文本框的高度时，您会得到 16px。跨度的高度报告为 19px(通常，IE 显示为 22px)。

Answer 1

输入元素将有一个默认的边框和填充，这可能因浏览器而异。尝试删除它:

<input type="text" style="padding: 0; border: 0" />

尝试在 Firefox 中使用 Firebug 检查元素以查看元素的有效填充/边距/边框。在您的示例中，您会看到文本字段有一个 2px 的边框和一个 1px 的顶部和底部填充。