คุณสมบัติ display: inline ทำให้ element แสดงในบรรทัดเดียวกัน (ไม่ขึ้นบรรทัดใหม่) และใช้ความกว้าง/สูงเพียงพอต่อเนื้อหา ไม่สามารถกำหนด width/height ได้
ตัวอย่างที่ 1: span แบบ inline
<!DOCTYPE html> <html> <head> <style> span { background-color: orange; color: white; } p.demo { display: none; } span.demo1 { display: inline; } </style> </head> <body> <h1>Match Details</h1> <div> Match will begin at <p class="demo">9AM</p> 10AM on 20th December. </div> <div> Match will end at <span class="demo1">5PM</span> on 20th December. </div> </body> </html>
ตัวอย่างที่ 2: span พร้อม ID
<!DOCTYPE html> <html> <head> <style> span#demo { background-color:orange; color: white; display:inline; } </style> </head> <body> <h1>Match Details</h1> <div> Match will begin at <span id="demo">9AM</span> on 20th December. </div> </body> </html>
คำอธิบาย
ตัวอย่างทั้งสองแสดง <span> (ซึ่งเป็น inline โดยค่าเริ่มต้น) ใช้ display: inline อย่างชัดเจน ทำให้ "9AM" และ "5PM" แสดงต่อเนื่องกับข้อความรอบๆ
ลักษณะของ Inline Elements:
| ลักษณะ | คำอธิบาย |
|---|---|
| ขึ้นบรรทัดใหม่ | ไม่ |
| กำหนด width/height | ไม่ได้ |
| margin/padding แนวตั้ง | ไม่ส่งผลต่อ layout (แต่สร้าง visual space ได้) |
| margin/padding แนวนอน | ทำงานปกติ |
| text-align | ต้องตั้งที่ parent block |
| vertical-align | ทำงานได้ (baseline, top, middle, bottom) |
Inline Elements มาตรฐาน:
<span>, <a>, <strong>, <em>, <img>, <input>, <button>, <label>, <select>, <br>
เปรียบเทียบ Inline vs Inline-block vs Block:
| คุณสมบัติ | inline | inline-block | block |
|---|---|---|---|
| ขึ้นบรรทัดใหม่ | ไม่ | ไม่ | ใช่ |
| width/height | ไม่ได้ | ได้ | ได้ |
| margin แนวตั้ง | ไม่มีผล | ได้ | ได้ |
| padding แนวตั้ง | visual only | ได้ | ได้ |
