HTML의 공백 문제 해결

<h2 id="span-nbsp-class-glyphicon-nbsp-glyphicon-send-span-nbsp-联系我们"><span class="glyphicon glyphicon-send"></span> 联系我们</h2>
<h2 id="span-nbsp-class-glyphicon-nbsp-glyphicon-send-span-nbsp-联系我们"><span class="glyphicon glyphicon-send"></span> 联系我们</h2>
<h2 id="span-nbsp-class-glyphicon-nbsp-glyphicon-send-span-nbsp-联系我们"><span class="glyphicon glyphicon-send"></span> 联系我们</h2>

위 세 가지 작성 방법에서 아이콘과 텍스트 사이의 거리가 다른 이유는 무엇인가요? 인라인 블록 아이콘 및 줄 바꿈과 관련이 있습니까? 5줄을 바꾸면

<h2 id="span-nbsp-class-glyphicon-nbsp-glyphicon-send-span-nbsp-联系我们"><span class="glyphicon glyphicon-send"></span> 联系我们</h2>
<h2 id="span-nbsp-class-glyphicon-nbsp-glyphicon-send-span-nbsp-联系我们"><span class="glyphicon glyphicon-send"></span> 联系我们</h2>

위의 두 효과는 동일합니다. 왜 그럴까요?

<h2 id="span-nbsp-class-glyphicon-nbsp-glyphicon-send-span-nbsp-nbsp-nbsp-联系我们"><span class="glyphicon glyphicon-send"></span>   联系我们</h2>

nasp는 실제 입력한 공백과 동일한 효과를 발휘하는데 nbsp를 사용하는 이유는 무엇입니까?

<h2 id="span-nbsp-class-glyphicon-nbsp-glyphicon-send-span-nbsp-nbsp-联系我们"><span class="glyphicon glyphicon-send"></span>  联系我们</h2>
<h2 id="span-nbsp-class-glyphicon-nbsp-glyphicon-send-span-nbsp-nbsp-nbsp-nbsp-nbsp-nbsp-nbsp-联系我们"><span class="glyphicon glyphicon-send"></span>       联系我们</h2>

1칸, 1nbsp와 5칸, 1nbsp가 동일한 효과를 갖는 이유는 무엇인가요?

브라우저가 HTML 문서를 파싱할 때 여러 개의 연결된 공백, 캐리지 리턴 또는 TAB이 직접 하나로 파싱됩니다...

인라인 요소(span, b, a 등) 사이의 공백 또는 리턴이 파싱됩니다. 공백이므로 코드의 첫 번째 부분은 다음과 같습니다.

 联系我们
  联系我们
<h2 id="span-nbsp-class-glyphicon-nbsp-glyphicon-send-span-nbsp-nbsp-nbsp-联系我们"><span class="glyphicon glyphicon-send"></span>   联系我们</h2>

일반적으로 HTML은 문서에서 공백을 잘라냅니다. 문서에 10개의 연속 공백을 입력하면 HTML은 그 중 9개를 제거합니다. 를 사용하면 문서에 공백을 추가할 수 있습니다.

nbsp는 영어 Non-Breaking SPace의 약어로, "non-breaking space"로 직역하면 됩니다. HTML에서 는 공백문자 1개(영문에서는 공백문자 1개)를 나타내며, 한자는 영문자 2개, 즉 2개를 차지합니다.

DOM의 공백 문자는 노드 구조를 처리할 때 많은 문제를 야기합니다.
Mozilla 소프트웨어에서는 원본 파일의 모든 공백 문자가 DOM에 나타납니다(태그에 포함된 공백 문자 제외). 이러한 처리 방법이 필요한 것은 한편으로는 편집기에서 텍스트를 선형으로 정렬할 수 있고, 다른 한편으로는 CSS의 공백: pre도 역할을 할 수 있기 때문입니다.
즉,
-일부 공백 문자는 그 자체로 텍스트 노드가 됩니다.
-일부 공백 문자는 다른 텍스트 노드와 결합되어 하나의 텍스트 노드가 됩니다.

Internet Explorer는 노드 사이에 생성된 공백 텍스트 노드(예: 줄 바꿈)를 무시하지만 다른 브라우저는 그렇지 않습니다.

위 내용은 HTML의 공백 문제 해결의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!