HTML에 공백을 삽입하는 방법

프론트엔드 개발을 하다 보면 페이지에 공백을 추가해야 하는 경우가 있는데 어떻게 추가하나요? 이번 글에서는 HTML 페이지에 공백을 삽입하는 방법을 소개하겠습니다. 도움이 되셨으면 좋겠습니다. [추천 관련 동영상 튜토리얼: HTML 튜토리얼]

1. 공백 입력

html 페이지에서 "space" 키를 입력하면 공백을 삽입할 수 있습니다.

예: p.p1에 공백 1개를 입력하고 p.p2에 공백 5개를 입력합니다. 참고: 이는 "공백"을 입력할 때 반자 상태입니다.

<p class="p1">测试文字| php中文网！</p>
<p class="p2">测试文字|     php中文网！</p>

렌더링:

HTML에 공백 1개, 공백 5개 또는 기타 여러 공백을 입력하면 웹 브라우저가 자동으로 이 공간을 하나의 공간으로 축소하세요.

그렇다면 여러 개의 입력된 공백을 어떻게 표시합니까? 전각 상태에서 "space" 키를 입력할 수 있습니다. 예:

<p class="p1">测试文字|　php中文网！</p>
<p class="p2">测试文字|　　　　　　php中文网！</p>

Rendering:

설명: 전각 공백은 한자로 해석되어 빈 한자 형태로 표시됩니다. 실수로 표시됩니다(표시되는 개수).

또는

 태그를 사용하여 이 문제를 해결합니다(반각 상태에서 "space" 입력). 예: </p><pre class="brush:html;toolbar:false"><p class="p1">
    <pre class="brush:php;toolbar:false">测试文字| php中文网！

测试文字|     php中文网！

Rendering:

2. html의 공백 문자를 사용합니다.

We HTML에서 표현을 사용할 수 있습니다. 공백의 문자 엔터티는 HTML 페이지에 공백을 삽입하는 데 사용됩니다. HTML에서 공백을 나타내는 문자 엔터티를 살펴보겠습니다.

문자: 이 공백이 차지하는 너비입니다. 글꼴의 영향을 받습니다.

 문자: 전체 너비 모드에서 "공백" 키의 절반(한자 너비의 절반)을 입력합니다.

 문자: 전체 너비 모드(한자 1자 너비)에서 "space" 키를 입력하세요.

효과를 살펴보겠습니다.

<p class="p1">测试文字|  字符nbsp显示空格！</p><br /
<p class="p2">测试文字|&ensp;字符ensp显示空格！</p><br />
<p class="p3">测试文字|&emsp;字符emnsp显示空格！</p>

렌더링:

설명:   문자가 차지하는 너비는 기본적으로 글꼴의 영향을 받지 않으며 매우 견고합니다.

요약: 위 내용이 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다.

위 내용은 HTML에 공백을 삽입하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!