การสร้างช่องว่าง (Whitespace) ใน HTML

แท็ก <spacer> ใน HTML ใช้ระบุช่องว่าง (Whitespace) แท็กนี้ล้าสมัยและรองรับเฉพาะ Netscape 4+ เท่านั้น ไม่ควรใช้ในปัจจุบัน

แอตทริบิวต์ของแท็ก <spacer> (Deprecated)

แอตทริบิวต์	ค่า	คำอธิบาย
`type`	vertical, horizontal, block	ระบุประเภทของ spacer: แนวตั้ง, แนวนอน, หรือบล็อก
`size`	number	ระบุจำนวนพิกเซลความสูงหรือความกว้าง ใช้เมื่อ type เป็น horizontal หรือ vertical
`width`	number	ใช้เมื่อ type="block" ระบุความกว้างของบล็อกในพิกเซล
`height`	number	ใช้เมื่อ type="block" ระบุความสูงของบล็อกในพิกเซล
`align`	left, right, center	ระบุการจัดตำแหน่งของบล็อกช่องว่าง

ตัวอย่าง (ทำงานเฉพาะ Netscape)

<!DOCTYPE html>
<html>
  <head>
    <title>HTML spacer Tag</title>
  </head>
  <body>
    Create some space <spacer type="block" width="70" /> now.
  </body>
</html>

⚠️ คำเตือน: แท็ก <spacer> ล้าสมัย (Obsolete) แล้ว ไม่รองรับในเบราว์เซอร์สมัยใหม่ (Chrome, Firefox, Safari, Edge) ห้ามใช้ในการผลิต (Production)

วิธีที่ถูกต้องในปัจจุบัน: ใช้ CSS

แทนที่จะใช้ <spacer> ให้ใช้ CSS properties ต่อไปนี้:

1. Margin - ระยะห่างภายนอก

<div style="margin-bottom: 20px;">Content above</div>
<div>Content below (20px gap)</div>

2. Padding - ระยะห่างภายใน

<div style="padding: 15px;">Content with inner spacing</div>

3. Gap (Flexbox/Grid) - ระยะห่างระหว่างรายการ

<div style="display: flex; gap: 15px;">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

4. Empty div กับ height (กรณีจำเป็น)

<div style="height: 30px;"></div> <!-- vertical spacer -->

5. White-space property

<p style="white-space: pre-wrap;">This    preserves    spaces</p>

สรุป: อย่าใช้ <spacer> ใช้ CSS (margin, padding, gap, height) แทน ซึ่งยืดหยุ่น รองรับทุกเบราว์เซอร์ และเป็นมาตรฐาน