Как правильно верстать формы?

Question

[Lumore]

Я понимаю что инпуты будут выходить за форму если дать им ширину 100% и еще padding.
В моем случае код такой:

input[type='text'], input[type='email'], input[type='password'], textarea {
        width:  100%;
	background: #fff;
	border: 1px solid #ccc;
	padding: 6px 10px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}

И результат такой:


А у Twitter Bootstrap тоже самое, но за форму ничего не вылазит:


Что у меня не так? И как это исправить?

Answer 1

[Хангелды Илебаев]

Салам Это потому что Bootstrap использует border-box

* {
box-sizing:border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}

Comments

[Pavel Demyanenko]

А зачем префиксы? Нормально же поддерживается caniuse.com/#feat=css3-boxsizing

[Хангелды Илебаев]

Там написано partial support

[Pavel Demyanenko]

Хангелды Илебаев А если дочитать до конца, то написано: "Partial support refers to supporting only the content-box and border-box values, not padding-box (which was added to the spec later)".

[Хангелды Илебаев]

Pavel Demyanenko: Спасибо вам вы правы

Answer 2

[Pavel Demyanenko]

Box-sizing (htmlbook.ru/css/box-sizing) решает проблему.

Обратите внимание на www.456bereastreet.com/lab/box-sizing

Answer 3

[Владислав Козуля]

Bootstrap использует css-свойство box-sizing со значением border-box, при котором padding не добавляет ширины элементу.

Подробнее можно почитать, например, на хабре.