CSS display voice narration
# Web Site Writing Basics # cssDisplay
CSS display is the feature used to define the display format of each HTML Element, which affects the placement of elements (such as newline or display) and the use of space on a web page, with popular values such as block (newline, full-width space-eating), inline (not newline-up, eat space as needed), inline-block (align in one line, but define width and height), none (hide all elements, do not eat space), as well as values for complex layouts like flex and grid.
Basic features of display:
Display: block;:
Require that the element be rendered like a block, with a new line every time and the full width possible.
The width, height, margin, and padding can be determined.
The inherent block-level element example is < div > or < p >.
Display: inline;:
Require an in-line display element, not a new line, and will only eat as much space as the element needs.
The width and height cannot be determined directly because they do not eat the full width.
The inherent inline-level element example is < span >, < a >, or < img >.
Display: inline-block;:
It's a combination of inline and block.
The elements are lined up on the same line like inline, but width, height, margin, and padding can be defined like block.
Display: none;:
Not only does it disappear from the screen, it will not consume any space on the page, as if it did not exist.
Display for complex layout arrangement:
In addition to the basic features, there are other values used for new layout arrangements:
Display: flex;:
It is used to create a Flexbox layout to place elements in one direction (row or column) flexibly.
Display: grid;:
It is used to create a CSS Grid layout that can control the placement of elements in both row and column axes simultaneously.
The display feature is very important in controlling the appearance and display behavior of elements on a web page, allowing us to create a website with good structure and an impressive user experience (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 ดูทันที จะเข้าใจเร็วมากกว่าท่องจำ
