Почему высота кнопки и высота поля формы разнятся?

Question

[sadaffairs]

Код.
Почему при равных свойствах, которые влияют на размеры элемента, высота поля формы (<input type="text">) и кнопки (<button type="submit">) различаются на 1-2 пикселя? Долго искал почему, но не нашёл, прошу помочь мне.

Comments

[Степан Крапивин]

скриншот можно? У меня в хроме и firefox оба инпута равны https://jsfiddle.net/uxfz7opj/ --> https://drive.google.com/file/d/0B9B9F2yBkwWLRGRJd...

[Степан Крапивин]

а, извиняюсь, не заметил ссылку в начале вопроса.

Answer 1

[Сергей Горячев]

border и display как правило мешаются.
Решаю обычно через box-sizing: border-box;
Также нужно, чтобы input и button были блочными display: block;
Потом выравнивать их внутри формы через float или flexbox.

Comments

[sadaffairs]

А чем тогда его заменить?

[Сергей Горячев]

sadaffairs: box-sizing: border-box; и возможно display: block; для input и button.

[Сергей Горячев]

sadaffairs: После заблочивания display: block; выравнивать через float или flexbox.

[sadaffairs]

Sergey Goryachev: через flexbox вышло выравнять высоту, отлично