css display บรรยายด้วยเสียง
#พื้นฐานการเขียนเว็ปไซต์ #cssdisplay
CSS display คือคุณสมบัติที่ใช้กำหนด รูปแบบการแสดงผล ของ HTML Element แต่ละตัว ซึ่งมีผลต่อการจัดวางองค์ประกอบ (เช่น การขึ้นบรรทัดใหม่ หรือการแสดงผลเรียงกัน) และการใช้พื้นที่บนหน้าเว็บ โดยมีค่าที่นิยมใช้เช่น block (ขึ้นบรรทัดใหม่, กินพื้นที่เต็มความกว้าง), inline (ไม่ขึ้นบรรทัดใหม่, กินพื้นที่เท่าที ่ต้องการ), inline-block (เรียงกันในบรรทัดเดียว แต่กำหนดความกว้างและสูงได้), none (ซ่อนองค์ประกอบทั้งหมด ไม่กินพื้นที่) รวมถึงค่าสำหรับเลย์เอาต์แบบซับซ้อนอย่าง flex และ grid.
คุณสมบัติพื้นฐานของ display:
display: block;:
กำหนดให้องค์ประกอบนั้นแสดงผลเหมือนบล็อก โดยจะขึ้นบรรทัดใหม่ทุกครั้ง และใช้ความกว้างเต็มที่เท่าที่สามารถทำได้.
สามารถกำหนดค่า width, height, margin, และ padding ได้.
ตัวอย่าง block-level element โดยธรรมชาติคือ <div> หรือ <p>.
display: inline;:
กำหนดให้องค์ประกอบแสดงผลแบบอินไลน์ คือไม่ขึ้นบรรทัดใหม่ และจะกินพื้นที่เท่าที่องค์ประกอบนั้นต้องการเท่านั้น.
ไม่สามารถกำหนด width และ height ได้โดยตรง เพราะไม่ได้กินพื้นที่เต็มความกว้าง.
ตัวอย่าง inline-level element โดยธรรมชาติคือ <span>, <a>, หรือ <img>.
display: inline-block;:
เป็นการผสมผสานระหว ่าง inline และ block.
องค์ประกอบจะเรียงต่อกันในบรรทัดเดียวกันเหมือน inline แต่สามารถกำหนด width, height, margin, และ padding ได้เหมือน block.
display: none;:
ใช้ซ่อนองค์ประกอบอย่างสมบูรณ์ ไม่เพียงแต่จะหายไปจากหน้าจอ แต่จะ ไม่กินพื้นที่ใดๆ บนหน้าเว็บเลย ราวกับว่าองค์ประกอบนั้นไม่มีอยู่จริง.
display สำหรับการจัดเลย์เอาต์ที่ซับซ้อน:
นอกจากคุณสมบัติพื้นฐาน ยังมีค่าอื่น ๆ ที่ใช้สำหรับการจัดเลย์เอาต์แบบใหม่ ๆ:
display: flex;:
ใช้สำหรับสร้างเลย์เอาต์แบบ Flexbox เพื่อจัดวางองค์ประกอบในทิศทางเดียว (แถวหรือคอลัมน์) ได้อย่างยืดหยุ่น.
display: grid;:
ใช้สำหรับสร้างเลย์เอาต์แบบ CSS Grid ที่สามารถควบคุมการจัดวางองค์ประกอบทั้งในแนวแกนแถว (row) และคอลัมน์ (column) พร้อมกันได้.
คุณสมบัติ display มีความสำคัญมากในการควบคุมรูปลักษณ์และพฤติกรรมการแสดงผลขององค์ประกอบบนเว็บเพจ ทำให้เราสามารถสร้างเว็ บไซต์ที่มีโครงสร้างที่ดี และมีประสบการณ์ผู้ใช้ (UX) ที่น่าประทับใจได้
ถ้าเพิ่งเริ่มทำเว็บ “display” เป็นจุดที่ทำให้หลายคนงงเร็วมาก (เราก็เคย) เพราะมันไปกำหนดพฤติกรรมการวางตัวของ element ว่าจะขึ้นบรรทัดใหม่ไหม กินพื้นที่แค่ไหน และส่งผลต่อการจัดระยะ (margin/padding) ด้วย ลองดูแนวคิด + ตัวอย่างที่หยิบไปใช้จริงได้เลย 1) display: block ใช้เมื่ออยากให้เต็มบรรทัด เวลาใช้กับ <div> หรือ <p> จะเห็นชัดว่าแต่ละกล่องจะขึ้นบรรทัดใหม่เสมอ และโดยทั่วไปจะกว้างเต็มแถว (100%) ข้อดีคือกำหนด width/height ได้เต็มที่ ตัวอย่าง: p.ex3{display:block; background-color:#f2f2f2; padding:10px;} เหมาะกับ: กล่องเนื้อหา, section, การ์ดที่ต้องการเรียงลงมาเป็นแถวๆ 2) display: inline ใช้เมื่ออยากให้อยู่ “ในบรรทัดเดียวกัน” inline จะไม่ขึ้นบรรทัดใหม่ และกว้างเท่าที่เนื้อหาต้องใช้ เช่น <span> หรือ <a> จุดที่ต้องระวังคือ inline จะกำหนด width/height ไม่ค่อยได้ (มันไม่ได้ทำตัวเป็นกล่องเต็มรูปแบบ) ตัวอย่าง: p.ex2{display:inline; background-color:yellow; padding:10px;} ทิป: padding ใส่ได้ แต่บางครั้งการดันระยะบน-ล่างอาจไม่เป็นเหมือน block 3) display: inline-block ทางสายกลางที่ใช้บ่อยมาก inline-block คือ “เรียงในบรรทัดเดียวเหมือน inline” แต่ “กำหนดขนาดได้เหมือน block” เหมาะมากกับปุ่ม, badge, กล่องเล็กๆ หลายอันที่อยากให้เรียงกัน ตัวอย่าง: span{display:inline-block; background-color:#dff; padding:10px; width:120px;} 4) display: none ซ่อนแบบไม่กินพื้นที่ ต่างจาก visibility:hidden (ที่ยังจองพื้นที่ไว้) เพราะ display:none คือหายไปเลยและเลย์เอาต์จะยุบตาม ตัวอย่าง: p.ex1{display:none;} เหมาะกับ: ซ่อน/โชว์ด้วย JS, เมนูบนมือถือ, ส่วนที่ยังไม่อยากให้แสดง 5) display: flex เมื่ออยากจัดเรียงแบบยืดหยุ่น (แถวหรือคอลัมน์) ถ้าคุณเคยปวดหัวกับการจัดให้อยู่กลาง หรือจัดให้ item กระจายเท่าๆ กัน flex ช่วยได้เยอะมาก ตัวอย่างเริ่มต้น: .container{display:flex; gap:10px;} .container .item{padding:10px; background-color:#eee;} ทิปที่ใช้บ่อย: justify-content (จัดแนวนอน), align-items (จัดแนวตั้ง) 6) display: grid เมื่ออยากทำเลย์เอาต์ “สองมิติ” grid เหมาะกับหน้าแบบตาราง/แดชบอร์ด/การ์ดหลายคอลัมน์ เพราะควบคุมทั้ง row และ column ได้พร้อมกัน ตัวอย่างเริ่มต้น: .grid{display:grid; grid-template-columns:repeat(3,1fr); gap:12px;} .grid .card{background-color:#fafafa; padding:10px;} สรุปเลือกใช้เร็วๆ - อยากให้ขึ้นบรรทัดใหม่และเป็นกล่องเต็มรูปแบบ: block - อยากให้แทรกอยู่ในบรรทัดเดียวกับข้อความ: inline - อยากเรียงต่อกันแต่ยังกำหนดขนาดได้: inline-block - อยากซ่อนและไม่ให้กินพื้นที่: none - จัดเรียงแถว/คอลัมน์แบบยืดหยุ่น: flex - ทำเลย์เอาต์เป็นตารางควบคุมสองมิติ: grid ถ้าลองทำจริง แนะนำให้เปิด DevTools แล้วสลับค่า display ดูทันที จะเข้าใจเร็วมากกว่าท่องจำ
