爲什麼文本框和外翻跨度之間的高度差？

爲什麼在給出以下html的元素高度報告差異？爲什麼文本框和外翻跨度之間的高度差？

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

當你問文本框的高度，你會得到16px。跨度的高度報告爲19px（通常，IE說22px）。

2009-10-30 Danno

因爲父元素是文本框的邊框，邊距和邊距的像素因素。

2009-10-30 14:53:20

就是這樣。將填充和邊界重置爲零，它們都報告相同。謝謝。 – Danno

IE框模型與其他瀏覽器不同。寬度是總數，包括邊界邊距和填充，而邊界和填充除了元素之外的其他邊界。 – tahdhaze09

輸入元素將有一個默認的邊框和填充，這可能會從瀏覽器到瀏覽器有所不同。嘗試刪除：

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

嘗試使用Firebug檢查Firefox中的元素，查看有效填充/保證金/元素的邊界。用你的例子，你會看到文本字段的頂部和底部有一個2px的邊框和1px的填充。

2009-10-30 14:53:19

...這就是爲什麼* {margin：0;填充：0;}是一個好主意:) –

我也嘗試合併一個重置樣式表，照顧所有元素。 – tahdhaze09

回答