[css]img삽입 시 하단 여백 제거

img태그를 통해 이미지를 삽입하다보면 하단에 애매하게 2~4px정도 여백이 생긴다.

우선 해결방법은

1) display 변경

img {
  display: block;
}

2) vertical-align 변경

img {
  vertical-align: top or bottom;
}

둘 중에 하나를 img태그에 적용해주면 해결된다.

발생원인은

img태그는 기본적으로 inline요소인데, inline요소들의 vertical-align속성은 기본값이 baseline이다.

이 baseline은 알파벳 g, j, p, q, y와 같이 글자 하단부가 기준선 밑으로 내려가는 글자의 하단부를 표시하기위해 밑에 약간의 공간을 생성한다.
이때문에 inline 요소들의 하단에 공백이 생기는 것이며 위에 적었듯이 display:block 또는 vertical-align 변경을 통해 조정할 수 있다.

끝