home

หน้าแรก
 Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> HTML

การแยกความแตกต่างระหว่างประเภทของช่องว่างใน HTML

ใน HTML บางครั้งเราจำเป็นต้องสร้างช่องว่าง และมันก็ไม่ง่ายเหมือนการใช้สเปซบาร์เพื่อสร้างมัน โดยเฉพาะอย่างยิ่งหากเราต้องการช่องว่างหลายช่องในแถวหรือแท็บ – HTML มักจะยุบหลายช่องว่างให้เป็นช่องว่างเดียว นี่คือที่มาของเอนทิตี HTML ในบทความนี้ เราจะพิจารณาเอนทิตี HTML ต่างๆ ที่ช่วยให้เราสร้างพื้นที่ว่างในขนาดต่างๆ ได้ทั้งหมด

ช่องว่างมีสี่ประเภทหลักที่เราสามารถใช้ได้ในองค์ประกอบ HTML:พื้นที่บาง พื้นที่ไม่แตก ช่องว่างภายใน และ พื้นที่ว่าง โปรแกรมแก้ไขโค้ดด้านล่างสรุปความแตกต่างของขนาดระหว่างสี่ประเภท:

<!DOCTYPE html>
<!--
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title></title>
  <style>
    span {
      background: pink;
    }
 
    <style>
        body {
           font-family: Arial
        }
    </style>
</head>
 
<body style="font-family:Arial;">
  <h1>Differences in Sizes of Space Entities in HTML</h1>
   <!-- At beginning of sentences -->
  <p style="font-size:16px;text-decoration:underline;font-weight:bold;"> Beginning of Sentences</p>
  <p><span>&thinsp;</span>I am a sentence.</p>
   <p><span>&nbsp;</span>I am a sentence.</p>   
   <p><span>&ensp;</span>I am a sentence.</p>
   <p><span>&emsp;</span>I am a sentence.</p>
   <!-- in between words -->
   <p style="font-size:16px;text-decoration:underline;font-weight:bold;"> In Between Words</p>
<p>I<span>&thinsp;</span>am<span>&thinsp;</span>a<span>&thinsp;</span>sentence.</p>
<p>I<span>&nbsp;</span>am<span>&nbsp;</span>a<span>&nbsp;</span>sentence.</p>  
   <p>I<span>&ensp;</span>am<span>&ensp;</span>a<span>&ensp;</span>sentence.</p>
<p>I<span>&emsp;</span>am<span>&emsp;</span>a<span>&emsp;</span>sentence.</p>
 </body>
</html>

ประเภทพื้นที่ที่แตกต่างกันสามารถให้บริการตามวัตถุประสงค์ที่แตกต่างกัน ในตัวอย่างโค้ดนี้ เราจะพิจารณาความแตกต่างระหว่างช่องว่างมาตรฐานที่ใช้สเปซบาร์กับการใช้เอนทิตี HTML 

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>repl.it</title>
</head>
<body style="font-family:Arial;">
<div>
     <strong>Using nbsp; example</strong>
     <br/>
     <br/>
     <div style="width:50px;height: 50px;border:1px solid red;margin:10px;">Dr. John Doe</div>
     <div style="width:50px;height: 50px; border: 1px solid red;margin:10px;">Dr.&nbsp;John&nbsp;Doe</div>
<div style="width:50px;height: 50px;border:1px solid red;margin:10px;">Reno, NV</div>
      <div style="width:50px;height: 50px; border: 1px solid red;margin:10px;">Reno,&nbsp;NV</div>
	
   </div>

<div>
     <strong>Using emsp; example</strong>
     <br/>
     <br/>
     <div style="border:1px solid red;margin:10px;">
       <p>Here are some quotes.</p>
 
       <p> <em> &mdash;To be or not to be, that is the question...</em></p>
       <p> <em> &mdash;This above all: to thine own self be true...</em></p>
       <p> <em> &mdash;What's in a name? That which we call a rose
By any other word would smell as sweet...</em></p>
 
     </div>
     <div style="border: 1px solid red;margin:10px;">
       <p>Here are some quotes.</p>
       <p>&emsp;<em> &mdash;To be or not to be, that is the question...</em></p>
       <p>&emsp;<em> &mdash;This above all: to thine own self be true...</em></p>
       <p>&emsp;<em> &mdash;What's in a name? That which we call a rose
By any other word would smell as sweet...</em></p>
     </div>
   </div>
</body>

เมื่อคุณมีวลี ชื่อ หรือหมายเลขที่ไม่ควรรวมไว้ในบรรทัดถัดไป ให้ใช้เอนทิตีอักขระ nbsp เมื่อคุณมีกลุ่มข้อความที่ต้องเน้นในบรรทัดหรือย่อหน้าของตัวเอง ให้ใช้เอนทิตีอักขระ emsp

ตารางนี้สรุปรหัสที่สามารถใช้กับช่องว่างขนาดต่างๆ ได้:

การแยกความแตกต่างระหว่างประเภทของช่องว่างใน HTML

รหัสเหล่านี้ใช้ได้กับขนาด/ประเภทพื้นที่ตามลำดับ การรองรับเบราว์เซอร์นั้นค่อนข้างแพร่หลายสำหรับชื่อเอนทิตี แต่ถ้าปรากฏว่าไม่เป็นเช่นนั้น รหัส Hex และ Dec ก็ใช้งานได้เช่นกัน