[CSS] p또는 div 태그 안에 img가 들어있으면, 밑에 공백이 생김 해결

개요

어드민에 상품 소개 에디터를 개발하는 중,, p태그 안에 img 태그가 들어가는 요소가 있는데, p에 계속 css로 설정하지 않은 아래 공백이 발생하였다. 이부분을 꼭 제거해달라는 md분의 요구사항으로 2시간동안 파악해보았다.

 

원인

image태그가 인라인 요소라서 그렇다고 한다.

인라인 요소는 블록 요소랑 다르게 보이지 않는 가상의 기준선이 존재한다.

기본값으로 vertical-align baseline을 가진다고 한다.

이건, p나 y처럼 아래 삐져나오는 글자를 위해 마련한 공간이다. 이 공간때문에 발생한 것이었다.

 

해결방법

 

참고

https://ux.stories.pe.kr/45