คุณสมบัติ display ควบคุมสิ่งใด

Question

Accepted Answer

`display` เป็นหนึ่งในคุณสมบัติ CSS ที่พื้นฐานที่สุด — มันควบคุม **วิธีการสร้างกล่อง (box) ขององค์ประกอบ** และวิธีการจัดวางองค์ประกอบลูกของมัน

```css
.a { display: block; }        /* full width, starts new line (div, p, section) */
.b { display: inline; }       /* flows in text, ignores width/height (span, a) */
.c { display: inline-block; } /* flows inline BUT respects width/height/margins */
.d { display: none; }         /* removed entirely — no space, not rendered */
.e { display: flex; }         /* flex container — 1D layout for children */
.f { display: grid; }         /* grid container — 2D layout for children */
```

## ส่วนภายนอกกับส่วนภายใน

`display` ตั้งค่าสองสิ่งจริง ๆ: วิธีการทำงานของกล่อง **ด้านนอก** (block/inline) และวิธีการจัดวาง **องค์ประกอบลูก** ด้านใน (flow/flex/grid) `display: flex` หมายความว่า "กล่องนี้อยู่ที่ระดับ block และองค์ประกอบลูกของมันเป็นรายการ flex"

## display: none กับ visibility: hidden

```css
.gone   { display: none; }        /* removed from layout — takes NO space */
.hidden { visibility: hidden; }    /* invisible but STILL occupies its space */
```

ความแตกต่างที่สำคัญ: `display: none` ทำให้เลย์เอาต์ยุบตัวลง (และซ่อนจากตัวอ่านข้อความ); `visibility: hidden` ปล่อยช่องว่างที่องค์ประกอบเคยอยู่ ใช้ `display: none` เพื่อลบออกจริง ๆ `visibility: hidden` เพื่อซ่อนขณะที่รักษาเลย์เอาต์

## ม้าแรงของเลย์เอาต์

```css
.container {
  display: flex;          /* lay children in a row/column (one dimension) */
  gap: 1rem;
}
.grid {
  display: grid;          /* lay children in rows AND columns (two dimensions) */
  grid-template-columns: repeat(3, 1fr);
}
```

เลย์เอาต์สมัยใหม่สร้างขึ้นเกือบทั้งหมดจาก `flex` (1D — แถวหรือคอลัมน์) และ `grid` (2D — แถวและคอลัมน์ร่วมกัน)

## ทำไมจึงสำคัญ

`display` กำหนดพฤติกรรมเลย์เอาต์ทั้งหมดขององค์ประกอบ

การรู้ความแตกต่างระหว่าง block, inline และ inline-block อธิบายการไหลเริ่มต้น; `flex`/`grid` เป็นหัวใจของเลย์เอาต์สมัยใหม่ และความแตกต่างระหว่าง `none` และ `visibility` เป็นรายละเอียดที่ทดสอบบ่อย ๆ และสำคัญในทางปฏิบัติ