растягивание элемента из-за отступов

[alleclf]

На страничке находится несколько input'ов и кнопка отправить. input'ы растягиваются на всю длину блока. Если input'ам установить padding общая длинна input'а увеличится и он вылазит за пределы отведенной области.

Код для примера:

<div width="500">
<p>Укажите свой e-mail<br><input type="text" name="email" class="mtinput</p>
</div>

Код стилей:

.mtinput { width:100%; padding:5px; }

Если я устанавливаю в стилях padding в 5пх размер input"а будет не 500 а 510пх и он вылазит за пределы области.

Это как-то можно поправить? Явно указывать размеры не подходит, так как один стиль используется в нескольких местах где размеры блока разные и идеально подходит процентное указание.

[wwt]

задать полю свойство box-sizing:border-box но это для IE8+

либо http://jsfiddle.net/K4VeD/ пойти немного другим путем и задавать стилистику не самому полю а контейнеру в котором оно находится.

Edited March 25, 2013 by wwt