Mozilla 한국 커뮤니티

<div>
<a href="........"><img src="..." /></a>
<a href="........"><img src="..." /></a>
<a href="........"><img src="..." /></a>
</div>

위 예제를 브라우저로 보면 IE에서 각각의 이미지 아래, 오른쪽에 공백이 생깁니다.
(여백이 아니라 [공백]이 생깁니다.)

이미지의 border을 0으로 하고, 모든 속성에 padding: 0; margin: 0;을 주었습니다.

그런데 계속 IE에서 이미지 아래, 오른쪽에 공백 하나씩이 생깁니다.

그런데 희안하게도

<div><a href="........"><img src="..." /></a><a href="........"><img src="..." /></a><a href="........"><img src="..." /></a></div>

이렇게 가로로 코드를 나열하면 공백은 말끔히 사라집니다.

텍스트 편집기로 작업할 때 코드의 가독성을 높이기 위해 태그에 줄바꿈을 해주는 것이 좋은데..

전자의 방법으로 코딩해도 공백이 나오지 않게 하는 방법이 없을까요?

float 속성을 사용하여 이미지를 block 요소화시켜 표시하는 방법이 있을 수 있고, font-size: 0; letter-spacing: -1px; 조합을 사용할 수도 있습니다.