배너나 썸네일 박스에 이미지를 넣었는데 이미지 아래에 3~5px 정도의 빈 여백이 생겨 배경색이 비쳐 보인 적 있으신가요?
margin과 padding을 모두 0으로 해도 사라지지 않는 이 여백은 버그가 아니라, 이미지가 글자처럼 줄 위에 놓이기 때문에 생깁니다. display: block이나 vertical-align 한 줄이면 정리됩니다.

1. 단독으로 쓰는 이미지는 display: block

메인 배너, 상품 썸네일, 카드 이미지처럼 혼자 한 줄을 차지하는 이미지라면 display: block이 가장 확실합니다. 줄 위에 놓이지 않으니 글자 꼬리 공간도 생기지 않습니다. 반응형 대응을 위해 max-width: 100%와 height: auto를 함께 두는 것을 권합니다.

/* 원인 : img는 글자처럼 기준선(baseline)에 놓입니다 */
.banner img {
  display: block;   /* 줄 위에 놓이지 않으니 여백 사라짐 */
  max-width: 100%;
  height: auto;
}

이미지를 가운데 정렬하던 text-align: center는 block이 되면 더 이상 먹히지 않습니다. 이때는 margin: 0 auto로 바꿔 주세요.

2. 글자 옆 아이콘은 vertical-align

버튼 안의 작은 아이콘처럼 글자와 같은 줄에 있어야 하는 이미지를 block으로 바꾸면 줄이 바뀌어 버립니다. 이럴 때는 기준선 대신 다른 위치에 맞추도록 vertical-align을 바꿉니다. baseline만 아니면 여백은 생기지 않고, 글자와의 높이 맞춤은 middle이 가장 무난합니다.

/* 글자와 같은 줄에 있어야 하는 아이콘은 */
.btn img {
  vertical-align: middle; /* 또는 top, bottom */
}

3. 리뉴얼 작업이라면 기본값으로

페이지마다 하나씩 고치기보다 공통 CSS에 기본값으로 넣어 두면 이후에 추가되는 이미지까지 한 번에 해결됩니다. 실제로 오래된 사이트를 리뉴얼할 때 게시판 썸네일, 배너, 푸터 로고 아래 여백이 한꺼번에 정리되는 경우가 많습니다.

/* 사이트 전체 기본값으로 넣어 두는 방법 */
img, video, svg {
  vertical-align: middle;
}

• flex나 grid 컨테이너의 바로 아래 자식인 이미지는 블록처럼 다뤄지므로 이 여백이 생기지 않습니다.
• 부모에 font-size: 0이나 line-height: 0을 주는 방법도 있지만, 안에 글자가 들어가면 함께 사라지니 권하지 않습니다.
• a 태그로 감싼 이미지는 a가 아니라 img에 적용해야 합니다.