<span> เป็น元素 HTML แบบ generic เหมือน <div> แตต่างกันที่:
<div>= block element — ใช้จัด layout ใช้พื้นที่เต็มแถว<span>= inline element — ใช้พื้นที่แค่ที่จำเป็น ใช้เน้น/ 강조 ข้อความ
ตัวอย่างเปรียบเทียบ
<style> .div-style { background: purple; color: blanchedalmond; padding: 20px; margin: 10px; } .span-style { background: orange; color: black; } .highlight { display: inline-block; height: 100px; width: 75%; background: mediumslateblue; color: ivory; } </style> <h3>Divs</h3> <div class="div-style">I'm a div</div> <div class="div-style">I take up as much space as I can</div> <h3>Spans</h3> <span class="span-style">I'm a span</span> <span class="span-style">I only take up exactly as much space as I need.</span> <span class="span-style">I emphasize text a lot.</span>
ใช้ class จัดกลุ่ม spans/divs เปลี่ยนสี/พื้นหลังใน CSS จำไว้: span ไม่สามารถตั้ง height/width ได้ เว้นแต่เพิ่ม display: inline-block
การใช้งานร่วมกัน
Spans และ divs ทำงานร่วมกับ元素 HTML อื่นสร้างโครงสร้างเว็บไซต์ Spans จัดสไตล์แยกจาก divs เพื่อเน้นข้อความ
สรุป
<div> = block layout container, <span> = inline emphasis element ใช้ร่วมกันได้ และ span ต้อง display: inline-block ถ้าต้องการกำหนด height/width
