Why the height difference between a textbox and a surronding span?

Question

Why is there a reported difference in element heights given the following html?

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

When you ask for the height of the text box you'll get 16px. The height of the span is reported as 19px (usually, IE says 22px).

Answer 1

The input element will have a default border and padding, that may differ from browser to brower. Try removing that:

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

Try inspecting the element with Firebug in Firefox to see the effective padding/margin/border of elements. With your example, you'll see that the text field has a 2px border and a 1px padding at the top and at the bottom.

Answer 2

Because the parent element factors in the pixels for the border, padding, and margins of the textbox.