<img>요소 밑에 5px 공간 생긴 이유
문제를 발견했다.
블록요소 안에 위치한 이미지 태그 밑에 의도하지 않은 작은 공간이 생긴다는 걸 발견했다.
나의 액션은?
padding-bottom, margin-bottom을 적용하지 않았는데 뭘까, 왜 생긴걸까 원인이 딱히 떠오르지 않았다.
혹시 inline요소여서 그런걸까 싶어서 display:block을 적용했고 <img>요소 밑의 공간을 없앨 수 있었다.
그렇지만 아직 이유를 파악하지는 못했다. 그냥 어떻게 얻어걸린 상황!
다시 여러 번 검색해서 원인을 찾을 수 있었고 원인을 알게되지 아하! 이해가 되었다.
해결된 이유
inline요소는 baseline이 존재한다.
여기서 중요한 건 텍스트와 이미지와 같은 inline요소은 수직정렬의 기본값이 baseline이라는 것과 이때의 baseline은 g,j,p,q,y와 같이 기준선 아래로 내려가는 글자들을 표현하기 위해 아래에 공간을 둔다는 것이다. 이 공간이 바로 내가 발견한 이미지 요소 아래 5px의 틈이 생기는 이유이었다.
그렇다면 이 갭을 없애기 위한 방법도 간단하다.
이미지 요소의 display를 block으로 바꿔주던가 아니면 vertical-align을 top/bottom/middle중 하나로 변경해주면 된다.
경험을 통해 배운 것
문제의 원인을 파악하지 못하고 그저 이것저것 손대다 해결한 경우는 메모장에 따로 기록해두어서 꼭 이해를 하고 넘어가야 한다. 왜냐하면 또다시 똑같은 상황이 발생할 확률이 높고, 그때마다 꽤 많은 시간을 문제 해결하는데 반복해서 쓰기 때문이다. 그저 급급하게 문제를 해결하고 넘어가기 보다는 왜 작동이 되고, 왜 작동이 안되는지, 이런 결과가 왜 나타나는지 스스로 질문을 던지면서 문제를 바라보는 시선이 많이 변화된 것 같다. 이런 태도를 가지면 순간순간을 배움의 기회로 가져갈 수 있다는 걸 배웠다.