img 아래 약간의 여백

국내에 웹 사이트들이 웹 표준을 지키고 OS나 브라우저와 관계 없이 접근성을 향상 시키기 위한 사이트 버그 신고 및 문제 해결을 위한 게시판입니다.
댓글 게시
muik
게시물: 2
참여됨: 2005 12 30 09:14 04
연락:

img 아래 약간의 여백

게시물 작성자 muik » 2006 03 02 18:07 54

XHTML 1.1 문서입니다.

이 문서에 <img /> 태그로 넣은 모든 이미지 아래 부분에 약간의 공백(약 3픽셀정도)이 생깁니다. 어떤 방법으로 이 아래 공백을 없앨수 있을까요?

이미지태그를 div로 감싸보기도 하고 border,margin을 0으로 해보기도 했는데 안되는군요..

익스에서 보면 이미지의 아래 공백이 없습니다. 불여우에서만 아래 공백이 생깁니다.

유저 아바타
hyeonseok
해커
해커
게시물: 690
참여됨: 2004 08 11 22:14 59
연락:

게시물 작성자 hyeonseok » 2006 03 02 21:57 12

이미지의 크기가 어느정도 인가요?

zotoon
게시물: 24
참여됨: 2005 03 12 10:28 29
위치: 광주
연락:

게시물 작성자 zotoon » 2006 03 02 23:35 51

예제 페이지를 보여주면, 좀 더 확실한 답을 드릴 수 있겠으나,

style을 지정할때, 선택자 + img {display:block;}으로 해결할 수 있습니다.

선택자은 div나 p또는 a가 될 수 있습니다.

muik
게시물: 2
참여됨: 2005 12 30 09:14 04
연락:

답변 감사합니다.

게시물 작성자 muik » 2006 03 03 07:20 57

zotoon 씀:예제 페이지를 보여주면, 좀 더 확실한 답을 드릴 수 있겠으나,

style을 지정할때, 선택자 + img {display:block;}으로 해결할 수 있습니다.

선택자은 div나 p또는 a가 될 수 있습니다.
img { display:block; } 이처럼 하니까 잘 해결되었습니다. 답변 감사합니다.

그런데 이런 현상이 왜 나타나는지 모르겠습니다. 이것은 표준화 되어서 그런건가요?

eouia

게시물 작성자 eouia » 2006 03 03 08:40 08

img는 기본적으로 inline element입니다. 따라서 block처럼 region으로 인식되는 게 아니라 행의 일부문자처럼 인식됩니다. "행"의 높이와 문자높이와의 관계는 기본적인 typography 책들만 보셔도 잘 설명되어있습니다.

댓글 게시

누군가 접속

유저들이 이 포럼을 탐색중: 가입된 유저 없음 그리고 24 손님들