• 카테고리

    질문 & 답변
  • 세부 분야

    웹 개발

  • 해결 여부

    미해결

폰트어썸을 사용한 입력필드

21.05.20 12:30 작성 조회수 110

1

name tel email 등을 인풋에 적고 옆에 폰트어썸을 활요해서 아이콘을 나타내는 강의를 들었습니다.

input에 height:40px주고 padding 20px 주었습니다. 아이콘에도 height40px줬는데근데 아이콘 밑에 조금 공백이 생깁니다. 

왜그런지 봤더니 강의에서는 padding을 10px주었지만 저는 20px을 줬기에 10px로 바꿨더니 같아졌습니다. 근데  생각해보면 box-sizing : border-box 를 주면 padding을 늘려도 height도 40px 이상 안늘어나야하는거 아닌가요?  width는 그대로인데 height는 늘어나네요

답변 1

답변을 작성해보세요.

0

box-sizing : border-box를 준다고 무한정 보더와 패딩을 포함 하는건 아닙니다.

input에 height:40px인데 패딩을 20픽셀 주면 상하 20픽셀씩 합이 40픽셀 들어가니까 텍스트가 들어갈 input의 최소한의 부분 때문에 그런 현상이 나온것이 아닌가 합니다.