왜 형식 문자 다음과 같 CRLF 렌더링되는 특정 브라우저로 공백?

Question

내가 필요한 누군가가 나에게 설명해 이 추가 패딩서에 포함하는 div img 요소입니다.

당신이 갈 수 있다 http://www.dev12.com/CSSTest 라이브의 예 내 두 가지 문제가 발생합니다.

문제#1:Safari,Firefox,오페라 렌더링은 대략 6 픽셀의 원치 않는 맨 아래에 패딩 컨테이너 div.그것이 문제가되지 않은 경우가 명시적으로 설정하여 덧대 0px.

문제#2:면 나는 형식으로 내 코드는 각각의 이미지를 그 자체에 라인에서 나 html 파일에 추가적으로 6 픽셀의 오른쪽 여백은 추가됩니다.예를 들어,다음 코드 블록에 렌더링하는 원치 않는 패딩 사이에 두 개의 이미지

<div>
    <span><img src="button.gif" /></span>
    <span><img src="button.gif" /></span>
</div>

그러나, 이 코드 블록에 있지 않은 원하지 않는 공간:

<div>
    <span><img src="button.gif" /></span><span><img src="button.gif" /></span>
</div>

분명히 Safari,Firefox,오페라 렌더링을 내 캐리지 리턴 사이에 걸쳐 태그으로 공백.내가 기억 수 없습니다 지금까지 이 문제를 해결하기 전에.내가 쓰는 코드에서 파일을 미리 볼.가 설정을 나는 찾아야에 이를 방지하기 위해?

난 항상 사용하여 엄격한 XHTML1.0doctype.이는 특히 혼란 때문에 나에게 그것은 그렇게 기초적이다.누군가 이걸 이해하도록 도와주!

KN

Answer 1

#1 그 때문에 기본 기준을 정렬의 인라인 이미지-여분의 공간을 보고 계신 예약 센더(문자는 아래의 기준:g,p,q,y,etc.) 텍스트 주변 당신의 이미지입니다.(있다는 사실이 없는 텍스트는 관련이 없는 공간에 대한 그들은 여전히 예약됩니다.)

의 제거할 수 있습니다 그것은 다음과 같다:

img {  /* Or a suitable class, etc. */
    vertical-align: bottom;
}

#2 개행 문자가 공백을 얻으로 표시됩니다.한 경우 HTML 다음과 같다:

<p>This is a sentence
in a paragraph.<p>

당신이 기대하는 브라우저를 넣어 공간 사이"문장에서"and"",그렇지? <img> 요소는 인라인 블록처럼,단어 단락에 있습니다.

Answer 2

내가 올바르게 기억한다면, HTML 사양은 소스 파일의 모든 공백이 단일 공백으로 렌더링 될 것이라고 말합니다.

예를 들어, 새로운 HTML 문서 및 유형을 열면

hello
world

결과는 "Hello World"입니다.

다음 중 하나에 대해 동일한 결과가 나타납니다.

hello


world

------ 또는 ----------

hello world

------ 또는 ----------

hello                                                 world

"Hello"와 "World"사이에 얼마나 많은 공백을 넣는 지에 관계없이 하나만 렌더링 할 것입니다. 공백이 CRLF 또는 공간 문자인지는 중요하지 않습니다.