img 태그의 공백과 baseline

img 태그의 하단 공간

• div 혹은 p 태그 안에 img 태그로 이미지를 삽입하는 경우 하단에 공백이 생기게 된다.
• 이는 img 태그가 inline 요소로 취급되어 baseline 을 기준으로 위치하는 것으로, 해당 img 요소를 block 으로 처리 해주면 하단의 공백이 사라지게된다.
• inline 은 문자를 취급하기 위해 만든 개념이므로, 문자처럼 취급되어 baseline 에 정렬되는 것.

• display 속성에 따라 하단의 공백의 유무를 확인 할 수 있다.

다른 해결 방법

1. margin-bottom 을 음수로 지정한다.
2. vertical-align 을 baseline 이외의 값(top, middle, bottom)으로 지정한다.
3. img 의 부모요소에 font-size를 0으로 지정한다.

• 참고 링크 - https://gold-dragon.tistory.com/46

baseline 이란?

• baseline 은 영문자를 표현 할 때의 기준선을 이야기한다.
• abc 등 아래의 꼬리가 없는 문자와는 반대로 ygj 등 아래의 꼬리가 있는 문자들을 표현하기 위해서는 어느 정도의 공백이 있어야만 한다.
• 위 때문에 baseline 은 꼬리의 위치보다 위(abc 등의 문자의 바닥위치)를 기준하게 되는데, 이로 인해 하단에 공백이 생기게 된다.
  (img 태그 공백의 원인)

+

• 여러 방법이 있지만 가장 간단하고 효율이 괜찮은 것은 block 처리를 하는 것으로 생각된다.
• 만약 img 태그를 inline 요소로 유지해야 하는 상황이 생긴다면 block 이외에는 vertical-align을 이용하는 것이 가장 괜찮을 듯.