การเพิ่มแท็กช่องว่าง HTML

เมื่อเขียน HTML คุณจะสังเกตเห็นช่องว่างเพิ่มเติมเมื่อคุณกดแป้นเว้นวรรคไม่ปรากฏขึ้นเมื่อแสดงข้อความในเบราว์เซอร์

ตัวอย่างเช่น:

<p>April is the cruelest month,</p>
<p>April   is   the   cruelest   month,</p>

ในแท็ก

แรก จะมีช่องว่างเพียงช่องเดียวระหว่างแต่ละคำ แต่ในแท็ก

ที่สอง จะมีช่องว่างสามช่องระหว่างแต่ละคำ ไม่ว่าแต่ละบรรทัดจะแสดงบนหน้าเว็บในลักษณะเดียวกัน:

April is the cruelest month,
April is the cruelest month,

ในบทความนี้ เราจะพูดถึงโซลูชันสามวิธีในการเพิ่มพื้นที่เพิ่มเติมให้กับโค้ด HTML ของคุณ

HTML แท็กเพื่อเพิ่มช่องว่าง

อักขระ HTML แบบไม่แบ่งพื้นที่

ในการสร้างช่องว่างก่อน ระหว่าง หรือหลังข้อความของคุณ คุณสามารถใช้แท็ก ` ` ช่องว่างที่ไม่แตกได้ ต่อไปนี้คือตัวอย่างวิธีการใช้อักขระ HTML นี้:

<p>i carry your heart with me(i carry it in my heart)</p>
<p>i carry your &nbsp; heart &nbsp; with me(i carry it in my heart)</p>

ซึ่งแสดงผล:

ฉันพกหัวใจของคุณไปด้วย (ฉันพกไว้ในใจ)

ฉันพกหัวใจของคุณไปด้วย (ฉันพกไว้ในใจ)

81% ของผู้เข้าร่วมกล่าวว่าพวกเขารู้สึกมั่นใจมากขึ้นเกี่ยวกับโอกาสในการทำงานด้านเทคโนโลยีหลังจากเข้าร่วม bootcamp จับคู่กับ Bootcamp วันนี้

ผู้สำเร็จการศึกษาจากหลักสูตร bootcamp โดยเฉลี่ยใช้เวลาน้อยกว่าหกเดือนในการเปลี่ยนอาชีพ ตั้งแต่เริ่มต้น bootcamp ไปจนถึงหางานแรก

องค์ประกอบข้อความที่จัดรูปแบบไว้ล่วงหน้า

แท็ก

    <p>I was a child and she was a child,
   In this kingdom by the sea,
But we loved with a love that was more than love—
   I and my Annabel Lee—</p>

    <pre>I was a child and she was a child,
   In this kingdom by the sea,
But we loved with a love that was more than love—
   I and my Annabel Lee—</pre>

ซึ่งแสดงผล:

ฉันยังเป็นเด็กและเธอยังเป็นเด็ก ในอาณาจักรริมทะเลแห่งนี้ แต่เรารักด้วยความรักที่เป็นมากกว่าความรัก— ฉันและแอนนาเบล ลี—

ฉันเป็นเด็กและเธอก็เด็ก

ในอาณาจักรริมทะเลแห่งนี้

แต่เรารักด้วยรักที่เป็นมากกว่ารัก—

ฉันและแอนนาเบล ลี—

ตัวแบ่งบรรทัด

หากคุณต้องการเพิ่มช่องว่างระหว่างบรรทัดข้อความ แท็กตัวแบ่งบรรทัด หรือแท็ก
จะทำงานได้ดีที่สุด ต่อไปนี้คือตัวอย่างวิธีการใช้แท็ก
:

<p>so much depends
     upon

     a red wheel
     barrow

     glazed with rain
     water

     beside the white
     chickens</p>

<p>so much depends<br>
     upon<br>
     <br>
     a red wheel<br>
     barrow<br>
     <br>
     glazed with rain<br>
     water<br>
     <br>
     beside the white<br>
     chickens</p>

ซึ่งแสดงผล:

บทสรุป

โดยสรุป เราได้เรียนรู้สามวิธีในการเพิ่มช่องว่างโดยใช้แท็ก HTML หากคุณเพิ่งเริ่มใช้ HTML โปรดดูคำแนะนำของเราที่นี่:เรียนรู้ HTML:คู่มือการเรียนรู้ภาษามาร์กอัปไฮเปอร์เท็กซ์ หรืออ่านบทความของเรา ใช้เวลานานเท่าใดในการเรียนรู้ HTML