Непонятное поведение бордеров
 

Здравствуйте.

Есть 5 текстовых полей инпут, каждый из них обернут в абзац (<p>). В конце каждого поля добавлены по тегу <span> с картинкой внутри. Проблема в том, что никак не могу выравнять бордеры этих полей и span. Поля 2 и 4 - нормально выравнялись, остальные нет. Подскажите, пожалуйста, почему так происходит? Также хочется понять здесь логику такого поведения.

Ссылка (все не нужное выбросил, минимум кода):
http://sergcloud.ru/borders/

antserg, не верь инпутам. :D
Работай только с однотипными элементами. Например с теми же спанами...

В один из них засунь инпут без бордюров с нужной шириной и высотой.

Огромное вам спасибо. Вы правы.

может так

<span style="white-space: nowrap; border: solid 1px gray; padding: 0.1em; border-radius: 0.2em;">
	<input value="через:" style="outline-style: none; border: none;">
	<img src="http://sergcloud.ru/borders/i/x.png">
</span>

Текстовые инпуты нормально стилизуются и выравниваются. У меня бывали проблемы с чекбоксами и радио, и то наверно сам виноват.

danik.js,
сходу вспоминается, например, это

Nanto, не сталкивался. Сложно представить случай, когда нужно инпутам указать padding в процентах..

Не проще ли - сделать инпуты прозрачными, без бордеров и поставить нужную фоновую картинку на обрамляющий тег <p> ?

Бывает... Иногда старые костыли вылезают, иногда ещё что-то... Ну допустим надо инпут на всю ширину растянуть - ?

И как проценты паддинга помогут? Бордер то в процентах не задашь.
Решение - использовать box-sizing: border-box и никакие проценты не нужны.