img 태그 사용시 아래의 4px 의 미묘한 빈공간이 생기는 이유

문제

img 태그 이미지에 테두리를 주었을 때, 아래쪽에 미묘한 4px 의 빈 공간이 생긴다.

 

원인

• 이는 img 태그의 기본 display 속성이 inline 이어서 그렇다.
• inline 의 기본 vertical-align 은 baseline 이다.
  • 이는 알파벳의 특성 때문에 설정되어 있는 부분인데, 'abc'와 다르게 'gjy'와 같은 알파벳은 기준선을 기점으로 아래쪽으로 튀어나와 있다. 이를 내림 영자 (descenders) 라고 한다.

해결 방법

• vertical-align 을 middle 혹은 top 과 같은 다른 속성으로 바꾼다.
• 혹은 display 를 block 으로 바꿔준다.
  • 다만 이 방법은 img 태그 자체가 display: block 을 따르게 되기 때문에 vertical-align 이 사라지는 것 외에도 부수적인 효과가 있다. 이를 한번 더 생각은 해보아야 한다.

레퍼런스

https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align