답변:
하나는 속하지 않는 공간 이고 다른 하나는 일반 공간입니다. 줄 바꿈이없는 공간은 단어 중간에 줄 바꿈이되지 않는 것처럼 해당 지점에서 줄을 줄 바꿈하지 않아야한다는 의미입니다.
또한 Svend가 그의 의견에서 지적했듯이, 비 공백 공간은 축소되지 않습니다.
&hairsp      [ jsfiddle.net/medmunds/4crt3c9j/]
이 엔터티 는 비 분리 공간을 생성하며,이 위치에서 자동 줄 바꿈을 원하지 않을 때 사용됩니다. 일반 공간에는 문자 코드 32가 있고, 비 공백 공간에는 문자 코드 160이 있습니다.
예를 들어, 공백이있는 숫자를 천 단위 구분 기호 : 1 234 567로 표시 할 경우 숫자를 별도의 줄로 나눌 수 없도록 끊지 않는 공백을 사용합니다. 통화를 표시하고 금액과 통화 사이에 공백이있는 경우 : 42 SEK, 한 줄에 금액을 가져 오지 않고 다음 줄에 통화를 얻지 않도록 비 공백 공백을 사용합니다.
여기의 다른 답변 외에도 일반 공간과 같이 비 분리 공간은 "축소"되지 않습니다. 예를 들어
<p>Word1 Word2</p>과
<p>Word1 Word2</p>모든 브라우저에서 동일하게 렌더링됩니다.
<p>Word1 Word2</p>렌더링 될 때 공백을 유지합니다.
여기에 실제 예제가 있습니다.
http://codepen.io/anon/pen/GJzBxo
과
http://codepen.io/anon/pen/LVqBQo
같은 div, 같은 텍스트, 다른 "공백"
<div style="width: 500px; background: red"> [loooong text with spaces]</div>vs
<div style="width: 500px; background: red"> [loooong text with ]</div>edit위해 게시물에 답변의 코드 결과를 포함하거나 SO의 자체 내장 버전의 코드 펜을 추가하여 방문자가 외부 페이지를 떠나지 않고도 결과를 볼 수 있도록 코드를 실행할 수 있습니다. 자체 포함 된 정책의 이유는 링크에 도달 할 수 없으면 응답이 쓸모 없게되기 때문입니다. 또한 UX 는 사용자가 떠날 것을 요구 하고 답을 얻기 만하면 좋지 않습니다.
여러 일반 공백 문자 (공백, 표 및 줄 바꿈)는 하나의 공백 문자로 처리됩니다 .
를 제외한 모든 HTML 요소의 경우
PRE공백 시퀀스는 "단어"를 분리합니다 (여기서는 "단어가 아닌 공백 문자의 순서"를 의미하기 위해 "단어"라는 용어를 사용합니다). 텍스트를 형식화 할 때 사용자 에이전트는 이러한 단어를 식별하고 특정 서면 언어 (스크립트) 및 대상 매체의 규칙에 따라 배치해야합니다.
그래서
foo bar로 표시됩니다
foo bar그러나 휴식 공간이 항상 표시됩니다. 그래서
foo   bar로 표시됩니다
foo bar이미 언급했듯이 "중단 공간 없음"이있는 줄 바꿈은받지 않습니다.
또한 ""만 포함 된 요소가 잘못 표시 될 수 있습니다. & nbsp; 작동합니다. 즉 6에서 (내가 기억하는 한 IE7에는 동일한 문제가 있습니다) 빈 테이블 요소가있는 경우 내용이 없거나 흰색 만있는 경우 요소와 같은 스타일을 적용하지 않습니다 (예 : 테두리) 우주. 따라서 다음과 같이 테두리가 렌더링되지 않습니다.
<td></td>
<td> <td>이 예제에서 테두리가 표시되는 반면 :
<td>& nbsp;</td>흠-여기에 올바르게 렌더링하기 위해 더미 공간에 넣어야했습니다.
스택 가능하므로 여러 공간을 모두 만들 수 있습니다.
HTML은 한 칸만 구문 분석하고 나머지는 삭제합니다 ...
5 개의 공백을 원하면 5 x를 배치합니다
예를 들어 @Zoidberg가 맞습니다.
<h1>title</h1> <h2>date</h2>헤더 마크 업 사이에 공백을 표시하지 않습니다.
& nbsp ; 공간을 할 것입니다 :)
TLDR; 허용 된 답변 외에; 하나는 암시적이고 하나는 명시 적입니다.
브라우저가 애플리케이션 / 라이브러리 / 프레임 워크에서 작성했거나 생성 한 HTML을 읽을 때 HTML이 의미하는 바를 해석하는 것이 가장 좋습니다 (브라우저마다 다를 수 있음). HTML 엔터티 코드를 사용하면 브라우저에 더 구체적입니다. 사용자에게 캐릭터를 표시하고 싶다고 명시 적으로 말하고 있습니다. (예를 들어 개발자가 쉽게 읽을 수 있도록 HTML 간격을 두는 것이 아닙니다).
출력 HTML이 다음과 같은 경우 더 구체적으로 말하면 :
<html>
<title>hello</title>
<body>
<p>
Tell me and I will forget. Teach me and I
may remember. Involve me and I will learn.
</p>
</body>
</html>브라우저는 이러한 모든 단어 사이 (한층 더 나은 개발자 가독성을 위해 들여 쓰기 된 단어까지) 사이에 하나의 공백 만 렌더링합니다.
그러나 같은 것을 넣고 <p>태그를 다음 과 같이 변경 한 경우 :
<p>Hello There</p>그런 다음 더 명확하게 지시 한대로 공백을 렌더링합니다. 스타일링을 위해 이러한 공간을 사용한 역사가 있습니다. CSS가 발전함에 따라이 사용은 다소 줄어 들었습니다. 그러나 많은 HTML 문자 엔터티에는 여전히 유효하게 사용됩니다. 예를 들어 예기치 않게 / 의도하지 않은 해석을 피합니다 (예 : 코드를 표시하려는 경우). W3은 다른 문자 코드를 보여줄 수있는 좋은 페이지가 있습니다 .
<p>Hello There</p>OR <p>Hello There</p>(파괴 당신이 전에 모든 후 정기적으로 빈 공간을 사용하여 일부 비트를 저장할 수있는 문제가 아닌 경우 ).