คุณสมบัติ CSS Display ใช้สำหรับกำหนดว่าองค์ประกอบจะแสดงบนหน้าเว็บอย่างไร ค่าหลักๆ มีดังนี้:
| ลำดับ | ค่า Property | คำอธิบาย |
|---|---|---|
| 1 | inline | แสดงเป็นองค์ประกอบ inline |
| 2 | block | แสดงเป็นองค์ประกอบ block |
| 3 | contents | ทำให้คอนเทนเนอร์หายไป ลูกเป็นลูกของระดับบน |
| 4 | flex | แสดงเป็น block-level flex container |
| 5 | grid | แสดงเป็น block-level grid container |
| 6 | inline-block | แสดงเป็น inline-level block container |
| 7 | inline-flex | แสดงเป็น inline-level flex container |
| 8 | inline-grid | แสดงเป็น inline-level grid container |
| 9 | inline-table | แสดงเป็น inline-level table |
ตัวอย่างที่ 1: ใช้ display: none และ 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: ใช้ display: block และ inline-block
<!DOCTYPE html> <html> <head> <style> p { background-color: orange; color: white; } p.demo1 { display: block; } p.demo2 { display: inline-block; } </style> </head> <body> <h1>Match Details</h1> <div> Match will begin at <p class="demo1">10AM</p> on 19th Decemenber, 2019. </div> <div> Match will end at <p class="demo2">5PM</p> on 19th Decemenber, 2019. </div> </body> </html>
ผลลัพธ์
คำแนะนำการเลือกใช้
- block - div, section, header, footer, p (โครงสร้างหลัก)
- inline - span, a, strong, em (ข้อความภายในบรรทัด)
- inline-block - ปุ่ม, badge, เมนู, การ์ด
- flex - レイเอาต์ 1 มิติ (แถว/คอลัมน์)
- grid - เลย์เอาต์ 2 มิติ (แถวและคอลัมน์พร้อมกัน)
- none - ซ่อนองค์ประกอบ (ต่างจาก visibility: hidden ที่ยังครอบพื้นที่)
