คุณสมบัติ display สำคัญต่อ layout เว็บเพจ — กำหนดว่า元素แสดงอย่างไร相对于 元素รอบข้าง ค่าที่ใช้บ่อย: inline, block, inline-block
ไวยากรณ์
display: inline; display: block; display: inline-block;
ความต่างระหว่าง Inline, Block, Inline-Block
Inline
แสดง inline — ไม่มี line break ใช้พื้นที่แค่ที่จำเป็น ตั้ง width/height ไม่ได้ (ถูกละเลย)
元素 HTML ที่เป็น inline โดยค่าเริ่มต้น: <a>, <span>, <img>, <input>, <button>, <strong>, <em>, <code> ฯลฯ
Block
แสดงบรรทัดใหม่ ใช้พื้นที่เต็มความกว้าง (เว้นแต่ตั้ง width) ตั้ง width/height ได้
元素 HTML ที่เป็น block โดยค่าเริ่มต้น: <div>, <p>, <h1>-<h6>, <section>, <article>, <ul>, <li>, <table>, <form> ฯลฯ
Inline-Block
รวมข้อดีทั้งคู่: แสดง inline (ติดกันแนวนอน) แต่ตั้ง width/height ได้ — เหมาะสำหรับจัด layout ให้元素เรียงติดกัน
สรุป
inline = ไม่ขึ้นบรรทัดใหม่ ไม่ตั้งขนาดได้, block = ขึ้นบรรทัดใหม่ ตั้งขนาดได้, inline-block = ติดกันแนวนอน ตั้งขนาดได้ — เลือกใช้ตามความต้องการ layout
