CSS

CSS - Image 빈 공간 문제

image 태그 사용 시 아래에 의도하지 않은 빈 공간이 생기는 현상

image는 기본적으로 inline 요소다.

inline 요소는 텍스트처럼 baseline을 따르기 때문에 하단에 공백이 생긴다.

img {
  display: block;
}

/* 또는 */
img {
  vertical-align: top; /* 또는 middle, bottom */
}

이미지가 inline 요소라는 것을 몰라서 헤맸다. 기본 display 속성을 정확히 알아야 레이아웃 문제를 빠르게 해결할 수 있다.