HTML Spaces (การเว้นวรรค)

   อัปเดตล่าสุด Feb. 6, 2024

HTML บนเว็บเบราว์เซอร์นั้นจะละเว้นช่องว่างไว้ ซึ่งหมายความว่าหากเราเพิ่มช่องว่างหลายช่องระหว่างคำหรือ HTML Elements ช่องว่างเหล่านั้นจะถูกรวมเป็นแค่ช่องว่างเดียว เมื่อต้องการแทรกช่องว่างใน HTML


ตัวอย่าง

<!DOCTYPE html>
<html>
<head>
  <title>How to insert spaces into HTML</title>
</head>
<body>
  <p>We are DH Learning, we'll help you learn HTML fast</p>
  <p>We are   DH Learning, we'll help you learn HTML fast</p>
  <p>We are     DH Learning, we'll help you learn HTML fast</p>
  <p>We are       DH Learning, we'll help you learn HTML fast</p>
</body>
</html>


จากโค้ดด้านบนจะเห็นว่าแม้ว่าเราจะเคาะกี่ครั้ง แต่สุดท้ายแล้วจะถูกรรวมเป็น 1 space อยู่ดี

โดยจะได้ผลลัพธ์ด้งนี้

We are DH Learning, we'll help you learn HTML fast

We are DH Learning, we'll help you learn HTML fast

We are DH Learning, we'll help you learn HTML fast

We are DH Learning, we'll help you learn HTML fast


แล้วเราจะเพิ่มช่องว่างหรือทำเว้นวรรคใน HTML ได้ยังไง ซึ่งก็มีวิธีดังต่อไปนี้ครับ

1. ใช้คำสั่ง &nbsp; สำหรับเว้นวรรค HTML

การใช้คำสั่ง &nbsp; นี่เป็นวิธีการเว้นวรรคหรือเพิ่มช่องว่างที่เรียบง่ายที่สุดเลยก็ว่าได้ครับ

<!DOCTYPE html>
<html>
<head>
  <title>How to insert spaces into HTML</title>
</head>
<body>
  <p>We are DH Learning, we'll help you learn HTML fast</p>
  <p>We are &nbsp;&nbsp;DH Learning, we'll help you learn HTML fast</p>
</body>
</html>


จะได้ผลลัพธ์

We are DH Learning, we'll help you learn HTML fast

We are   DH Learning, we'll help you learn HTML fast

จะสังเกตเห็นว่าคำว่า DH นั้นจะมีช่องว่างเว้นวรรคแล้วเรียบร้อยด้วยคำสั่ง  &nbsp;


2. ใช้ <pre>

การใช้คำสั่ง pre ถือว่าเป็นอีกตัวเลือกที่น่าสนใจเพราะอะไรลองดูโค้ดต่อไปนี้ครับ (เดี๋ยวมาเขียนต่อครับ)


บทเรียนก่อนหน้า
บทเรียนถัดไป

HTML Tutorial HTML คืออะไร (Introduction) Lesson 1 HTML Headings Lesson 2 HTML Spaces (การเว้นวรรค) Lesson 3 HTML Images Lesson 4 HTML Comments Lesson 5 HTML Table Lesson 6

คอร์สเรียนแนะนำ