img 하단 여백 지우기

이미지를 백그라운드 이미지로 지정했는데

 

기본적으로 <img> 태그는 인라인 요소로 간주되기 때문에

 

인라인 요소는 텍스트와 같은 라인에 배치되며, 텍스트의 베이스라인을 기준으로 정렬되기 때문에

여백이 생길 수 있다.

 

 

해결법 

 

display: block 

로 바꾸면 된다.

 

 

 

혹은 

 

vertical-align: bottom; 

 

속성을 사용해보자.

 

앞에서 말한 img태그는 인라인 요소로 간주되므로,

 

요소의 하단을 부모 요소의 기준선 아래로 맞춰준다. 

즉, 요소가 포함된 라인 박스(line box)의 가장 아래쪽에 요소가 위치하도록 한다. 

 

이는 이미지 하단의 여백이 제거되는 효과를 가져올 수 있다!!