HTML输入字段边框小于包含它的div

Question

我遇到了一个问题。我的输入字段边框（键入时）小于div字段（边框与占位符一样大），如下图所示。

输入字段的css代码如下：

＆＃13;

＆＃13;

.form_login_username
{
	position: relative;
	width: 100%;
	background-color: white;
	border-radius: 5px;
	border: 1.2px solid #4d4d4d;
	padding: 12px 20px;
	margin-bottom: 15px;
}

.form_login_username img
{
	position: absolute;
	top: 1px;
	left: 5px;
}

.form_login_username input
{
	border: none;
	width: 100%; 
	padding-left: 45;
	box-sizing: border-box;
}

＆＃13;

＆＃13;

＆＃13;

输入字段的html代码是这样的：

＆＃13;

＆＃13;

<div 
  class = "form_login_username">
  <img 
    src = "User_Icon.png" 
    width = "40" />
  <input 
    type = "text" 
    name = "username" 
    placeholder = "Enter your username" 
    required />			
</div>

＆＃13;

＆＃13;

＆＃13;

我在html元素的样式部分设置字段的颜色（当我打字时）：

＆＃13;

＆＃13;

input:focus
{
  border: none;
  outline: 1.2px solid #feb434;
}

＆＃13;

＆＃13;

＆＃13;

请帮助我，我不知道边界为何如此之小。 谢谢！

编辑：终于解决了我的问题。对于那些解决这个问题的人来说，只需要填写＆＃34; padding＆＃34;进入输入css样式，而不是div css样式。我的问题是，白场不是输入字段，而是div字段，所以将填充值放入输入css样式，边框将出现在白色字段周围：）

Answer 1

添加height属性并根据需要设置它，如30px

.form_login_username input
{
border: none;
width: 100%; 
padding-left: 45;
box-sizing: border-box;
height: 30px;
}