HTML에 공백을 삽입하는 방법

青灯夜游
풀어 주다: 2018-12-26 13:20:00
원래의
30072명이 탐색했습니다.

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

HTML에 공백을 삽입하는 방법

1. 공백 입력

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

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

<p class="p1">测试文字| php中文网!</p>
<p class="p2">测试文字|     php中文网!</p>
로그인 후 복사

렌더링:

HTML에 공백을 삽입하는 방법

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

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

<p class="p1">测试文字| php中文网!</p>
<p class="p2">测试文字|      php中文网!</p>
로그인 후 복사

Rendering:

HTML에 공백을 삽입하는 방법

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

또는

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

测试文字|     php中文网!
로그인 후 복사

Rendering:

HTML에 공백을 삽입하는 방법

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에 공백을 삽입하는 방법

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

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

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

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿