Padding у input тектса

[cluboy]

Есть форма: http://jsfiddle.net/6BU8r/

Когда:

.form-contact input[type="text"] {padding: 0;}

Все инпут поля вписываются в рамки "form-content", а когда устанавливаем:

padding: 0 20px; 

То происходит увеличение длины инпута и выход его за пределы?

 

И второй вопрос - как вписать эти инпут-поля в "form-content", чтобы они не вылезали?

 

Спасибо!

[Veseloff]

1. Да, общая ширина — это width+padding.

2. Указать меньшую ширину. Или большую ширину у формы.

[Great Rash]

Можно заюзать box-sizing: border-box; (именно так сделано в bootstrap например). Но в старых ИЕ не заработает.

[cluboy]

1. Да, общая ширина — это width+padding.

2. Указать меньшую ширину. Или большую ширину у формы.

Нашел решение:

-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */-moz-box-sizing: border-box;    /* Firefox, other Gecko */box-sizing: border-box;         /* Opera/IE 8+ */

P.S. Great Rash - спасибо, именно такое решение и нашел!