CSS การแสดง

การกำหนดและการใช้งาน

คุณสมบัติ display กำหนดชนิดของกล่องแสดงที่องค์ประกอบควรสร้างขึ้น

รายละเอียด

คุณสมบัตินี้ใช้เพื่อกำหนดชนิดของกล่องแสดงที่องค์ประกอบจะสร้างขึ้นเมื่อจัดตัวตำแหน่ง สำหรับประเภทเอกสารเช่น HTML การใช้ display อย่างไม่ระมัดระวังอาจเป็นอันตรายเพราะอาจละเมิดโครงสร้างแสดงที่ได้กำหนดไว้ใน HTML สำหรับ XML ซึ่งไม่มีโครงสร้างแสดงที่มีอยู่ในลักษณะนี้ คุณสมบัติ display จึงเป็นสิ่งจำเป็น

หมายเหตุ：ใน CSS2 มีค่า compact และ marker แต่เนื่องจากไม่ได้รับการสนับสนุนอย่างกว้างขวาง จึงถูกลบออกจาก CSS2.1

ดูเพิ่มเติมที่

การเรียน CSSการจัดตัวตำแหน่ง CSS

คู่มืออ้างอิง HTML DOMคุณสมบัติ display

ตัวอย่าง

ทำให้ปารากราฟมีขอบอินไลน์

p.inline
  {
  display:inline;
  }

ทดลองด้วยตัวเอง

CSS ศัพท์

display: value;

ค่าของคุณสมบัติ

ค่า รายละเอียด
none องค์ประกอบนี้จะไม่แสดง
block องค์ประกอบนี้จะแสดงเป็นองค์ประกอบบล็อค และจะมีช่องว่างก่อนหลังและหลังองค์ประกอบ
inline โดยเริ่มต้น องค์ประกอบนี้จะแสดงเป็นองค์ประกอบอินไลน์ และไม่มีช่องว่างก่อนหลังหรือหลังองค์ประกอบ
inline-block องค์ประกอบอินไลน์บล็อค (ค่าที่เพิ่มใหม่ใน CSS2.1)
list-item องค์ประกอบนี้จะแสดงเป็นรายการ
run-in องค์ประกอบนี้จะแสดงเป็นองค์ประกอบบล็อคหรือองค์ประกอบอินไลน์ตามบริบท
compact CSS มีค่า compact แต่เนื่องจากไม่ได้รับการสนับสนุนอย่างกว้างขวาง จึงถูกลบออกจาก CSS2.1
marker มีค่า marker ใน CSS แต่เนื่องจากไม่มีการสนับสนุนที่แพร่หลาย จึงถูกลบออกจาก CSS2.1
table องค์ประกอบนี้จะแสดงเป็นตารางบล็อค (เหมือน <table>) และมีสัญญาณบรรจุข้อความต่อหลังและต่อหน้าตาราง。
inline-table องค์ประกอบนี้จะแสดงเป็นตารางอินไลน์ (เหมือน <table>) และไม่มีสัญญาณบรรจุข้อความต่อหลังและต่อหน้าตาราง。
table-row-group องค์ประกอบนี้จะแสดงเป็นกลุ่มแถวหลายแถว (เหมือน <tbody>)
table-header-group องค์ประกอบนี้จะแสดงเป็นกลุ่มแถวหลายแถว (เหมือน <thead>)
table-footer-group องค์ประกอบนี้จะแสดงเป็นกลุ่มแถวหลายแถว (เหมือน <tfoot>)
table-row องค์ประกอบนี้จะแสดงเป็นแถวตาราง (เหมือน <tr>)
table-column-group องค์ประกอบนี้จะแสดงเป็นกลุ่มหลักแถวหลายแถว (เหมือน <colgroup>)
table-column องค์ประกอบนี้จะแสดงเป็นหลักแถวตาราง (เหมือน <col>)
table-cell องค์ประกอบนี้จะแสดงเป็นตัวหน่วยเรียงตาราง (เหมือน <td> และ <th>)
table-caption องค์ประกอบนี้จะแสดงเป็นข้อหัวข้อตาราง (เหมือน <caption>)
inherit ระบุว่าควรสืบทอดค่าขององค์ประกอบ display จากองค์ประกอบพ่อ。

รายละเอียดเทคโนโลยี

ค่าเริ่มต้น： inline
ความสามารถที่จะสืบทอด： no
เวอร์ชั่น： CSS1
ระบบการเขียนทางจากภาษาเจ้า (JavaScript) ระบุ object.style.display="inline"

ตัวอย่างโดยตรง (TIY) ตัวอย่าง

วิธีการแสดงประกายเป็นองค์ประกอบแบบอินไลน์
ตัวอย่างนี้แสดงวิธีการแสดงประกายเป็นองค์ประกอบแบบอินไลน์。
วิธีการแสดงประกายเป็นองค์ประกอบแบบบล็อค
ตัวอย่างนี้แสดงวิธีการแสดงประกายเป็นองค์ประกอบแบบบล็อค。

การสนับสนุนโปรแกรมนี้

ตัวเลขในตารางบอกว่าเฉพาะเวอร์ชั่นบราวเซอร์ที่สนับสนุนคุณสมบัตินี้อย่างเต็มที่。

Chrome IE / Edge Firefox Safari Opera
4.0 8.0 3.0 3.1 7.0

หมายเหตุ：ถ้าได้กำหนด !DOCTYPE แล้ว อินเตอร์เน็ต เอกซ์เพรส 8 (และสูงกว่า) สนับสนุนค่าทางภาคสนาม "inline-table", "run-in", "table", "table-caption", "table-cell", "table-column", "table-column-group", "table-row", "table-row-group", และ "inherit"。