What is the CSS display?
# 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).
เวลาเจอคำว่า CSS display หลายคนจะนึกถึงแค่ inline กับ block แต่พอทำหน้าเว็บจริง ๆ จะเริ่มสับสนว่า “ทำไมมันไม่ขึ้นบรรทัดใหม่?” “ทำไมกำหนด width ไม่ได้?” หรือ “ซ่อนแล้วมันยังเว้นที่ว่างอยู่ไหม?” อันนี้คือสิ่งที่ฉันใช้เช็กเป็นขั้น ๆ เวลาจัดเลย์เอาต์ 1) เช็กก่อนว่า element ตัวนั้นเป็นอะไรโดยธรรมชาติ - div, p มักเป็น block อยู่แล้ว เลยขึ้นบรรทัดใหม่อัตโนมัติ - span, a มักเป็น inline เลยเรียงต่อกัน และ width/height ไม่ค่อยมีผล ถ้าอยากให้ลิงก์ (<a>) คลิกง่ายขึ้น (พื้นที่ใหญ่ขึ้น) ฉันมักเปลี่ยนเป็น display: inline-block; หรือ block; แล้วค่อยใส่ padding 2) ความต่างที่เจอบ่อย: inline vs inline-block vs block - inline: ไม่ขึ้นบรรทัดใหม่ และขนาดขึ้นกับเนื้อหา (กำหนด width/height ตรง ๆ ไม่ค่อยได้) - inline-block: ไม่ขึ้นบรรทัดใหม่เหมือน inline แต่กำหนด width/height ได้ ใช้ทำปุ่ม เมนู หรือ badge บ่อยมาก - block: ขึ้นบรรทัดใหม่ กินความกว้างเต็มแถว (ตามพื้นที่ที่มี) เหมาะกับ section ต่าง ๆ ของหน้าเว็บ ทริคที่ช่วยชีวิต: ถ้าอยากให้หลายกล่องเรียงกันแต่ยังคุมขนาดเองได้ ให้ลอง inline-block ก่อน (โดยเฉพาะงานง่าย ๆ) 3) display: none; ซ่อนแบบ “หายไปจริง” display: none; คือซ่อนและไม่กินพื้นที่บนหน้าเว็บเลย เหมือนไม่มี element นั้นอยู่ เหมาะกับการซ่อนเมนู/ปุ่มชั่วคราว ถ้าต้องการ “ซ่อนแต่ยังเว้นที่ไว้” (เช่น กันเลย์เอาต์กระโดด) ปกติจะใช้ visibility: hidden; แทน (อันนี้หลายคนชอบสับสน) 4) ตัวอย่าง layout แบบ display: block + inline-block (ง่ายและเร็ว) ฉันมักทำการ์ดสินค้า/บล็อกเล็ก ๆ แบบนี้: - กล่องการ์ดใช้ display: inline-block; - กำหนด width เช่น 200px และ margin ให้มีช่องว่าง เหมาะกับงานที่ไม่ต้อง responsive ซับซ้อนมาก แต่ถ้าจอเล็กแล้วอยากให้จัดเรียงยืดหยุ่น แนะนำไปทาง flex/grid จะคล่องกว่า 5) เริ่มจัดเลย์เอาต์จริงจัง: flex กับ grid ใช้ต่างกันยังไง - display: flex; เหมาะกับการจัดเรียง “แนวเดียว” เป็นหลัก (แถวหรือคอลัมน์) เช่น แถบเมนู ปุ่มเรียงกัน กล่องซ้าย-ขวา และจัดกึ่งกลางแนวตั้ง/แนวนอนได้ง่าย - display: grid; เหมาะกับเลย์เอาต์แบบ “ตาราง” คุมทั้งแถวและคอลัมน์พร้อมกัน เช่น หน้า dashboard, gallery, layout หลายคอลัมน์ที่ต้องกำหนดสัดส่วนชัด ๆ ถ้างานเป็นแถวเดียวฉันจะเริ่มที่ flex ก่อน แต่ถ้าต้องวางเป็นช่อง ๆ หลายมิติ grid จะตรงโจทย์กว่า 6) ใช้ .style.display (JavaScript) เวลาโชว์/ซ่อน ถ้าคุณทำปุ่มกดแล้วให้กล่องแสดง/หาย มักเจอการตั้งค่า element.style.display = 'none'; และตอนโชว์กลับเป็น 'block' หรือ 'flex' ข้อควรระวังจากที่เคยพลาด: ตอนโชว์กลับควรคืนค่าให้ถูกกับเลย์เอาต์เดิม (เช่น เดิมเป็น flex ก็ต้องกลับเป็น flex ไม่งั้น layout จะเพี้ยน) สรุปจำง่ายจากภาพรวม 6 แบบหลัก: none, inline, block, inline-block, flex, grid - จัดตัวอักษร/ลิงก์: เริ่มจาก inline/inline-block - ทำโครงหน้าเว็บเป็นส่วน ๆ: block - ซ่อนแบบไม่เหลือพื้นที่: none - จัดเรียงยืดหยุ่น: flex - ทำตารางเลย์เอาต์: grid