loginForm input type=email, password 위치 css 오류

Question

[사진]선생님~ padding-left:30px; 이 부분이 placeholder 블럭안으로 가야할 거같아요  input[type='email'], input[type='password'] {} 이 블럭안에 있으면 밑에 이미지처럼 중앙에 안맞더라고요~[사진]

Answer

padding-left: 30px를 input에ㅔ 준 이유는 input 내의 아이콘 자리에 커서가 클릭되면 입력할 때 아이콘과 겹치기 때문에 아이콘 자리 만큼 띄우기 위해서 준 것 입니다.

padding-left: 30px를 input::placeholder에 줘도 보여지는 것은 같지만 마우스 클릭하게 되면 커서의 위치와 텍스트 입력이 아이콘과 겹칩니다.

그래서 padding-left: 30px를 input에 주시는게 맞습니다.

[추가]

캡쳐처럼 우측으로 30픽셀만큼 밀린 부분은 box-sizing: border-box를 주지 않아서 그렇습니다.