22. Typographyimage 요소 아래에 패딩된 여분의 공간 제거하기

https://poiemaweb.com/css3-removing-white-space-image-element

Typography | PoiemaWeb

 

 

 

컨테이너 요소로 img 요소를 래핑하면 img 요소 아래에 의도하지 않은 여분의 공간이 패딩된다.

 

 

문제 원인 : image 요소는 inline 요소로 텍스트 취급되어서 위와 같은 문제가 발생한다.

 

 

해결법 1. 

해당 요소를 block 요소로 변환 

 

해결법 2.

vertical-align 프로퍼티의 기본값은 baseline인데 이를 변경하여 이미지 표시 위치를 조정하는 것이다.

 

해결법 3?

img 의 상위 요소에 display : flex