HTML에서 약간의 여백을 갖는 태그

Question

태그 안에 이미지를 넣습니다. 하지만 내가 이미지와 태그에 경계를했을 때. A 태그는 약간의 공간을 차지합니다. 그것은 'a'태그에 의해 여분의 공간을 극복하기 위해 이미지를 둘러싸고 있지 않습니다. 나는 빨간색 줄에 태그를 표시하고있다.

내 HTML :

<a href="#"><img src="http://img165.imageshack.us/img165/1043/burnhr6.png"/></a> 

CSS는 :

img 
{ 
    border:1px solid black; 
} 
a 
{ 
    border:1px solid red; 
} 

http://jsfiddle.net/rEPXY/2/

Answer 1

당신이 찾고있는이 같은가요?

a 
{ 
    border:1px solid red; display:inline-block; line-height:0; 
} 

Answer 2

이 이미지는 당신의 웹 사이트에 위치 할 것입니다 방법에 따라, 당신은 <a> 및 <img> 태그를 부동으로이 문제를 해결할 수 있습니다. 예제 수정 jsfiddle을 참조하십시오

HTML을 :

<a href="#"><img src="http://img165.imageshack.us/img165/1043/burnhr6.png"/></a> 

CSS는 : 당신이 태그에 테두리가 왜 해달라고 이해

img { 
    border:1px solid black; 
    float: left; 
} 

a { 
    border:1px solid red; 
    float: left; 
} 

www.jsfiddle.net/rEPXY/9

Answer 3

입니다. 나는 당신이 테두리를 추가 할 때 브라우저에서 태그가 내용이있는 요소로 해석되므로 태그의 내용에 맞게 기본 선 높이를 할당하고 너비를 조정할 것이라고 추측합니다.

Answer 4

라이브 예 : 그 줄 바꿈과 함께, 글꼴 크기 및 라인 높이를 준수 할 것, 그래서 http://jsfiddle.net/rEPXY/18/

이미지가 인라인으로 처리됩니다. 이미지와 컨테이너의 특성을 바꾸면 좋을 것입니다. 의 다른 요소와 귀찮은 정렬에게 그것을 될 예정의 <a> 태그 아래의 CSS는 inline-block을 사용하고 있지만 너무 <a> 태그를 떠 경우도 width 특성

와 block로 변경 될 수 있습니다.

img 
{ 
    border:1px solid black;float:left; 
} 
a 
{ 
    border:1px solid red;display:inline-block; 
} 

Answer 5

According to this, 다음과 같은 규칙을 추가하여 해결할 수 있습니다 : 당신의 jsfiddle에 날 위해 일하는 것 같았다

a img {vertical-align:bottom} 

.