익스에서 이미지 넣을때 아랫부분에 공간을 안잡게 하는법 아시는분..
벚꽃
!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN
html
head
meta http-equiv=Content-Type content=text/html; charset=euc-kr
titletest/title
style type=text/css
#Img {margin:0;padding:0;border:1 solid #000}
/style
/head
bodydiv id=Img
img src=http://auto.naver.com/img/main/netizen/07.jpg
/div/body
/html위 예제를 보면요..
이미지가 div 안에 딱 들어오지를 않고 하단에 공간이 잡힙니다. 배경 이미지를 깔려고 하는데 저 공간때문에 안맞는 상황이 발생하는군요.. 파이어폭스에서는 하단에 공간을 안잡던데
익스에서는 하단 공간 때문에 문제가 생깁니다.
저 하단 공간을 안생기게 할수 없는지요..
-
멱부리
저 같은경우에는...
p { margin:0px; padding:0px; } 해서
pimg/p 이런식으로 주는데 잘못된건가요? -
갤2
자주 나오는 질문이네요. ^^ 엄밀히 말해서 브라우저의 버그라기 보다는 css의 사양 때문입니다.
브라우저나 doctype에 따라서 다르게 표시가 되는데, 이미지 다음에 올 텍스트의 베이스 라인에 맞추기 때문에 아래에 공백에 생겨버립니다. 궁금하신 분들께선 이미지 옆에 간단하게 글자를 넣어 확인해 보시면, 텍스트의 베이스라인과 이미지의 베이스라인이 어떻게 차이가 나는지 아실겁니다.
해결법은 수다님이 말씀하신데로 또는 스타일을 img { vertical -
초코우유
앗 찬명님 설명 감사 합니다. ^^;;브라보~표준화이팅~
-
해사랑해
img 에 vertical-align:middle, vertical-align:top 등의 속성을 주는 방법과 display:block 을 주는 방법이 있는데요. 전자의 경우 IE에서 때에따라 이미지 하단이 1px 잘리는 버그가 있습니다. 그리고 img 와 인접된 링크 텍스트가 존재하는 경우 영문의 underline 과 한글의 underline 표시 위치가 달라져서 문제가 되기도 합니다. 즉, 크로스브라우징을 위하여 경험상 display:block 을
-
PinkPearl
img { display:block; } o
img {margin:0 0 -3px 0;} x
img는 기본적으로 inline element입니다.
block처럼 구역(?)으로 인식되는 게 아니라 행의 일부문자처럼 인식되어 그렇다는군요..^^ -
초엘
애틱형님이 보내준 링크는 사원만.. 아직인턴!!!!의 압박;
-
소라
display:block;
-
핫핑크
테이블로 하다가 표준좀 맞춰볼라 했더니 -ㅅ-;; 기존에 테이블에서 잘 하던것도 생각이 안나는 사태가 발생하는군요 -ㅅ-;
-
핫팬츠
움 -ㅅ-;; 익스가 여간 깐깐하군요 -ㅅ-;
-
타마
킁