2009-06-04 2 views
4

내 목표는 내가 일하고 있어요이 페이지에 대한 XHTML 1.0 엄격한 DOCTYPE을 사용하는 것입니다,하지만 난 이상한 설계 문제로 실행 해요 ..원하지 않는 간격은 1.0 엄격한

나는 아래에 있습니다 코드 :

<div><img src="photos/someimage.jpg" alt="Title" /></div> 

나는 엄격한 1.0으로 설정 DOCTYPE에 페이지를로드

, 간격의 작은 차이는 사업부 내에서 이미지 아래에 추가됩니다. 나는 모든 종류의 공백/줄 바꿈을 제거했다. 이것은 문제의 일반적인 원인으로 보인다. DOCTYPE을 1.0 Transitional로 변경하면 간격이 사라지고 페이지가 제대로 보이게된다.

여전히 1.0 Strict를 사용하는 동안이 문제를 피하는 방법을 알고 계실 것입니다.

시간 내 주셔서 감사합니다.

답변

20

http://www.schoonzie.com/rogue-padding-below-images

, 그것은 그 아래에 약간의 공간 나뭇잎보십시오. 이는 이미지가 텍스트의 기준선에 배치되고 기준선 아래에 g, j 또는 q와 같은 디 센더 문자를위한 공간이 있어야하기 때문입니다.

엄밀히 말하면 엄밀히 말하면 img {display : block}을 명시 적으로 제외하고 엄격 모드에서는 컨테이너를 이미지 주위에 단단히 고정시킬 수 없습니다.

https://developer.mozilla.org/en/images,_tables,_and_mysterious_gaps

다른 주요 선택은 이미지 인라인을두고 줄 상자에 대한 이미지의 수직 정렬을 변경할 수 있습니다

.

div img {vertical-align: bottom;} 
+0

수직 정렬 : 예를 들어, 다음을 시도 할 수 바닥; 잘됐다! 수정 및 훌륭한 설명에 대해 많은 감사드립니다. – bloudermilk

1

는 이미지가 인라인 표시되면이

<div style="font-size: 0px;"><img src="photos/someimage.jpg" alt="Title" /></div>