Почему элементы input игнорируют контейнер родителя?

Question

[Intelix]

Здравствуйте.
Почему элементы input игнорируют контейнер родителя?
Например если button задать padding то она растянется исходя из размера div "get-inputs". А input игнорирует размер div

Код: https://jsfiddle.net/ucdkvxqf/4/

Comments

[Rustam Bainazarov]

Вы забыли самый первый сброс стилей, который используется практически всегда (99% сайтов):

*, :before, :after {
   box-sizing: border-box
}

Описание данного свойства для изменения поведения блочной модели:
https://developer.mozilla.org/ru/docs/Web/CSS/box-...

Answer 1

[Салават Салахутдинов]

*,
*::before,
*::after {
  box-sizing:border-box;
}

Поставьте и все заработает. Так происходит потому что вы указали ширину в 100% для input, но стандартный border-box у браузеров стоит content-box, который не учитывает padding и border в размер ширины

Answer 2

[Lord_Dantes]

Стандартная разметка в HTML/CSS идет как бы по стандарту(хорошо сказал), вообще кароче если давать padding блокам то он будет идти как-бы в увеличении блока, а если писать box-sizing: border-box; то это значит что эти padding'и будут идти внутрь - если кратко. Почему и как почитайте в гугле.

form *{
    box-sizing: border-box;
}

Comments

[Сергей delphinpro]

вообще кароче если давать padding блокам то он будет идти как-бы в увеличении блока, а если писать box-sizing: border-box; то это значит что эти padding'и будут идти внутрь - если кратко

уж лучше ссылки давайте, чем такие "объяснения"
htmlbook.ru/samlayout/blochnaya-verstka/blochnaya-model

[Lord_Dantes]

Сергей delphinpro, ну блин человеку который даже приблизительно не знает что это и я без особых знаний рассказывать то что научился это такое себе дело))) Но спасибо за ссылочку)