วิธีเพิ่มระยะห่างระหว่าง Bullet และข้อความในรายการ HTML

ใช้ CSS property padding-left ในแท็ก <li> เพื่อเพิ่มช่องว่างระหว่าง bullet กับข้อความ

ตัวอย่าง: รายการปกติ (ไม่มีช่องว่างเพิ่ม)

<ul style="list-style-type:disc">
  <li>US</li>
  <li>Australia</li>
  <li>New Zealand</li>
</ul>

ตัวอย่าง: เพิ่ม padding-left 1em

<ul style="list-style-type:disc">
  <li style="padding-left:1em">US</li>
  <li>Australia</li>
  <li>New Zealand</li>
</ul>

วิธีที่แนะนำ (ใช้ CSS class)

.spaced-list li {
  padding-left: 1em; /* หรือ 16px, 1rem */
}

<ul class="spaced-list">
  <li>US</li>
  <li>Australia</li>
  <li>New Zealand</li>
</ul>

คำอธิบาย

• 1em = ขนาดฟอนต์ปัจจุบัน (ประมาณ 16px ปกติ)
• สามารถใช้ padding-left ใน <ul> ได้ แต่จะกระทุกรายการทั้งหมด
• ใช้ ::marker pseudo-element (CSS3) สำหรับจัดสไตล์ bullet โดยตรง (modern browsers)