Как сделать input во всю ширину родителя?

Question

[krock00000]

Верстаю мобильную версию сайта.
Есть input, который должен идти во всю ширину. Сделать это просто:
display: block;
width: 100%;
Но кроме этого надо добавить внутренний отступ. Так вот, при добавление отступа, у инпута получается ширина 100%, плюс ширина внутреннего отступа, и появляется горизонтальный скролл.
Подскажите пожалуйста, как можно реализовать данную задачу?
Вариант с oveflow: hidden не пойдет, так как надо чтобы поле было видно полностью.
Спасибо на перед :)

Answer 1

[Андрей Федоров]

Почему не задать отступ в процентах?

width: 98%;
padding: 1%;

Comments

[Kir ---]

Вот за эту фигню скажите спасибо w3, которые решили ударить по IE6 и решили что по умолчанию в интернете поведение должно быть content-box. И было 14 лет геморроя.

Answer 2

[Ilya Suhodolskiy]

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;

Comments

[Егор Федосенко]

Удобно еще задавать это сразу в * {}, присваивая всем элементам

[Роман]

Егор Федосенко: но ведь использовать селектор * жутко не правильно и медленно?

[Kir ---]

Роман: жутко медленно, если вы его задаёте где-нибудь в середине пути. А если просто *, то это быстро.