이미지 사이의 간격에 영향을 미치는 엄격한 doctype

StackOverflow https://stackoverflow.com/questions/489974

  •  20-08-2019
  •  | 
  •  

문제

XHTML Strict DocType로 전환했을 때 이미지 간격에 문제가 있습니다.

Yahoo의 재설정 스타일 시트를 사용하여 모든 기본 브라우저 패딩을 제거하는 다음 코드는 아래 두 이미지 사이에 약 4 픽셀의 간격을 남깁니다. 왜 이런거야?

Chrome과 Firefox에서는 문제 일뿐입니다. IE는 두 이미지 사이에 단일 픽셀을 표시하지 않습니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <link rel="stylesheet" type="text/css" 
     href="http://yui.yahooapis.com/2.6.0/build/reset/reset-min.css">
</head>

<body>

<div><img src="http://www.catfacts.org/cat-facts.jpg" border="0"/></div>
<div><img src="http://www.catfacts.org/cat-facts.jpg" border="0"/></div>


</body>
</html>
도움이 되었습니까?

해결책

Peter의 대답을 시작으로 시작으로 다음은 문제를 해결합니다.

img { vertical-align: bottom }

이것이 효과가있는 이유는 기본이기 때문입니다 vertical-align ~이다 baseline, 이는 Dangly 비트가 매달려있는 텍스트 "위"의 일부와 동일합니다 (소문자 G, Q 등은 모두이 기준 아래에 매달려 있습니다).

따라서 공간을 떠나기 위해이 돌출부를 위해 4px의 공간을 남겨두고있었습니다.

그것이 말이되기를 바랍니다.

편집 : 시각적 원조 소스 사이트
alt text
(원천: Brightlemon.com)

다른 팁

더 멍청한 이미지 간격에 대한 자세한 내용은 다음을 참조하십시오.

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

사용 개똥 벌레 이미지보다는 간격을 일으키는 것이 div임을 보여줍니다.

글꼴 크기를 설정합니다 : 0; 상단의 div와 격차가 사라집니다.

(이상하게도 상속 된 글꼴 크기가 있어야합니다.

엄격한 문서에서 이미지는 인라인 요소가되어 텍스트처럼 동작합니다. 따라서 변경해야합니다 vertical-align 속성 또는 디스플레이 속성을 변경하십시오 display: block, 또는 display:inline-block

일반적인 오류를 배제하려고 시도하면서 8 가지 유효성 검사 오류를 수정하여 코드 패스 검증을했습니다.

일반적으로 브라우저가 DocType에서 문서를 구문 분석 할 수없는 경우 결과는 지정되지 않습니다.

여전히 당신을 신경 쓰지 않지만 여기에 검증 코드가 있습니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
   <link rel="stylesheet" type="text/css" 
     href="http://yui.yahooapis.com/2.6.0/build/reset/reset-min.css" />
    <title>Required</title>
</head>

<body>

    <div><img src="http://www.catfacts.org/cat-facts.jpg" alt="cat1" /></div>
    <div><img src="http://www.catfacts.org/cat-facts.jpg" alt="cat2" /></div>

</body>
</html>

디스플레이 : 인라인 블록 솔루션은 확실히 작동하지 않았습니다.

수직-균형 : 하단 솔루션은 작동했지만 한 가지 경고로 : 상황에 따라 수직 정렬로 설정 해야하는 이미지가있었습니다.

엄격한 표준 대신 느슨한 표준으로 전환하면 저에게 도움이되었습니다 ... IE 형식을 유지했지만 Firefox와 Chrome에서 홀수 이미지 간격을 제거했습니다.

https://developer.mozilla.org/en/gecko%27S_ALMOST_STANDARDS_MODE

라인 사용 :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top