Что творится с Input?

Question

[niyaz_z]

Пытаюсь реализовать форму для авторизации. Есть три инпута с типами: text, password, submit. Когда пользователь входит в аккаунт все поля одного размера, после того как пользователь выходит из аккаунта поля для ввода становятся больше чем кнопка для отправки формы. Но если после этого попытаться ввести неверные данные, то с помощью echo выводится предупреждение и инпуты вновь становятся одинаковыми.
HTML:

<form method="POST">
		<input class = "text" type="text" name="login" placeholder="Enter login">
		<input class = "text" type="password" name="pass" placeholder="Enter password">
		<input class = "text" type="submit" name = "log" value = "Log In">
	</form>

CSS:

body,html{
			margin:0;
			padding:0;
		}
		form{
			padding:0;
			margin:0;
			}
		input, button{
			display:block;
			width:320px;
			height:40px;
			max-height:40px;
			padding:0;
			margin:0;
			}

PHP:

if ($user === $login){
  // Вход
   }
   else{
   	echo "Warning";
   }

Answer 1

[niyaz_z]

Всего навсего добавить в CSS:

input, button{
      display:block;
      width:320px;
      height:40px;
      max-height:40px;
      padding:0;
      margin:0;
box-sizing: border-box;
-moz-box-sizing: border-box;
      }

Comments

[Ankhena]

С уточнением: свойства с префиксами пишутся ДО основного свойства.
Для box-sizing не нужны префиксы для мозилы.

Для "last 2 version":

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

А в современной верстке их должен проставлять автопрефиксер, так что ручками префиксы вообще не нужно писать.

[strelok011]

А в современной верстке для этого конкретного случая вендорные префиксы так вообще не нужны. Смотрим тут https://caniuse.com/#search=box-sizing

[niyaz_z]

Спасибо за дополнения!