<a> 태그의 공간이 <img> 태그 여기

Question

같은 내용에 맞지 않는 것은이 코드는 다음 그림 초래

<a href="#" style="background-color:red; padding:30px;"> 
<img src="cat.jpg" style="width:150px; vertical-align:bottom;"/></a> 

코드

입니다 이미지에 맞게 크기가 커지지 않습니다. 보시다시피 이미지가 넘칩니다. 나는 "display : inline-block"이 있으면이 문제를 해결할 수있을 것이라고 생각하지만, 앵커 태그 안에 텍스트가있을 때 그 영역은 다음 그림과 같이 컨텐트에 따라 커질 것이기 때문에 왜 이런 일이 발생하는지 알고 싶습니다.

Answer 1

당신은 하단에 { display: block; }

Answer 2

공간에 <a> 태그를 설정할 수있는 것은 IMG

a img { 
    line-height: 0; 
} 

또는 당신은 또한 IMG 표시를 설정할 수 있습니다 라인 - 높이 : 디스플레이 블록도 차단하십시오