플롯 지정하기 강의에서 질문드립니다

Question

선생님이 이 코드에서 이미지의 틈을 없애기 위해, img { vertical-align: top; } 코드를 사용하셨는데요. 혹시 왜 이미지에 틈이 생기는지 이유를 알 수 있을까요? 그리고 왜 vertical-align: top; 을 하면 그 틈이 사라지는지도 궁금합니다 강의 정말 잘 보고 있습니다!

Dongho Lee · Answer

우선 틈이 생기는 이유는 img 요소가 인라인요소이기 때문입니다. 여러 줄의 인라인 텍스트 부분에 배경을 넣어보면 텍스트간 틈이 있는게 확인될 겁니다.
그래서 이미지에 나타나는 틈을 없애는 방법으로
상위 p 부분에 line-height: 0 처럼 지정해도 되지만 다른 텍스트에 영향이 있을수 있어 좋지 않습니다.
그래서 img 에 인라인의 상하 위치 조절하는 vertical-align 을 쓰는데, 위 예제만 보면 값이 top, middle, bottom 대부분 가능할 겁니다. vertical-align의 초기값은 baseline 인데, 이 값은 소문자의 경우 아래쪽 늘어지는 부분을 제외한 기준선으로 이 값 영향으로 그 틈이 나타나는 걸로 압니다. 이미지와 텍스트를 같이 배치해 보면 그림과 텍스트가 baseline 기준으로 정렬되는 것이 확인될 겁니다. 네이버나 다른 몇군데의 사이트를 둘러봤을때 vertical-align:top 을 가장 많이 쓴것 같아서 그렇게 했으나 대부분 vertical-align: bottom 도 가능합니다.
열심히 공부하시는데 도움이 되었으면 좋겠습니다. 감사합니다.