Ширина типа ввода = текстовый элемент

Question

Как получилось, когда я это сделал:

<input type="text" style="width: 10px; padding: 2px"/>
<div style="width: 10px; border: solid 1px black; padding: 2px">&nbsp;</div>

вход заканчивается на 2 пикселя шире, чем div в IE6 и FF3? Чего мне не хватает?

EDIT: Как говорили многие люди, проблема заключается в границе. Если я установлю border: 0px на входе, он будет иметь ту же ширину, что и div с границей 0 px (проверяется путем переноса его в ограниченный SPAN).

Однако, когда я измеряю элементы в краске, div имеет внутреннюю часть 14 px, как и ожидалось (10 + 2 + 2). Вход имеет, однако, внутреннюю часть 16 пикселей, а затем границу за пределами этого. Почему это? Возможно, это не ошибка, поскольку это происходит как в IE6, так и в FF3, но я этого не понимаю.

Answer 1

Я считаю, что именно так браузер отображает их стандартный ввод. Если вы установите границу для входа:

<input type="text" style="width: 10px; padding: 2px; border: 1px solid black"/>
<div style="width: 10px; border: solid 1px black; padding: 2px"> </div>

Тогда оба имеют одинаковую ширину, по крайней мере, в FF.

Answer 2

Ширина элемента visible равна width + padding + border + outline, поэтому кажется, что вы забыли о границе элемента input. То есть ширина границы по умолчанию для элемента ввода в большинстве (некоторых?) Браузеров фактически рассчитывается как 2px, а не как один. Следовательно, ваш вклад выглядит как 2px шире. Попробуйте явно установить border-width на входе или расширить ваш div.

Answer 3

Я думаю, что вы забыли о границе. Граница Div шириной в один пиксель отнимает два пикселя общей длины. Поэтому будет выглядеть так, как будто div на два пикселя короче, чем есть на самом деле.

Answer 4

ширина ввода равна 10 + 2 раза по 1 пикселю для границы