image 사이의 여백 - 인라인 요소의 vertical-align

img와 div, img와 img 사이의 여백은 왜 생기는 걸까??

---

 

이유는 vertical-align의 초기값이 baseline이기 때문인데요,

 

vertical-align은 인라인 요소의 상하 정렬을 위한 속성으로 영어를 쓸 때 baseline 기준으로 알파벳을 정리해줍니다!

 

이 속성은 span, strong과 더불어 img 등 모든 인라인 요소에 적용되어 있기 때문에

 

실제 요소의 높이와 baseline 사이에 간격이 여백으로 표시된다고 하네요.

 

이 여백을 없애는 방법으로는

1. vertical-align의 값을 bottom으로 주기
2. display를 block으로 바꾸기

등이 있습니다.

---

 

https://www.daleseo.com/css-img-extra-space/

 

관련 내용은 위 블로그에서 참고했습니다.