[CSS] HTML: 이미지 태그 img 여백 뜨는 문제 해결방법

img 엘리먼트에 공백 생기는 현상 및 해결 방법

a 엘리먼트 내에 img 삽입시 여백이 발생하는 현상

img, a태그 자체는 패딩도 마진도 없는데, 이미지가 뜨는 현상이 발생할 때가 있다.

자세히 보면 이미지 아랫부분이 미세하게 떠있다.

해결방법

아래의 두가지 방법중 하나를 적용하면 된다.(상황에 따라 선택 필요)

1. img 태그의 CSS vertical-align 속성을 bottom으로 설정.
2. img 태그의 CSS display속성을 block으로 설정.

/* 첫번째 방법 */
img {
  vertical-align: bottom;
}

/* 두번째 방법 */
img {
  display: block;
}

해결 완료 후 모습

a태그 내부에 떠있던 이미지가 여백 없이 꽉 찬다.

해결 완료!