Thuộc tính display điều khiển điều gì?

Question

Accepted Answer

`display` là một trong những thuộc tính CSS cơ bản nhất — nó điều khiển **cách một phần tử tạo ra box** và cách các phần tử con của nó được sắp xếp.

```css
.a { display: block; }        /* full width, bắt đầu dòng mới (div, p, section) */
.b { display: inline; }       /* chảy trong dòng text, bỏ qua width/height (span, a) */
.c { display: inline-block; } /* chảy inline NHƯNG tôn trọng width/height/margin */
.d { display: none; }         /* loại bỏ hoàn toàn — không chiếm chỗ, không render */
.e { display: flex; }         /* flex container — layout 1 chiều cho phần con */
.f { display: grid; }         /* grid container — layout 2 chiều cho phần con */
```

## Outer vs inner display

`display` thực ra đặt hai thứ: cách box hành xử **bên ngoài** (block/inline) và cách nó sắp xếp các phần tử **con bên trong** (flow/flex/grid). `display: flex` nghĩa là "box này là block-level, và các phần tử con của nó là flex item."

## display: none vs visibility: hidden

```css
.gone   { display: none; }        /* loại khỏi layout — KHÔNG chiếm chỗ */
.hidden { visibility: hidden; }    /* vô hình nhưng VẪN chiếm chỗ của nó */
```

Một điểm khác biệt quan trọng: `display: none` thu gọn layout (và ẩn khỏi screen reader); `visibility: hidden` để lại một khoảng trống nơi phần tử từng ở. Dùng `display: none` để thực sự loại bỏ, `visibility: hidden` để ẩn nhưng giữ layout.

## Các công cụ layout chủ lực

```css
.container {
  display: flex;          /* xếp con theo hàng/cột (một chiều) */
  gap: 1rem;
}
.grid {
  display: grid;          /* xếp con theo hàng VÀ cột (hai chiều) */
  grid-template-columns: repeat(3, 1fr);
}
```

Layout hiện đại gần như được xây dựng hoàn toàn trên `flex` (1D — hàng hoặc cột) và `grid` (2D — hàng và cột cùng lúc).

## Tại sao điều này quan trọng

`display` quyết định toàn bộ hành vi layout của một phần tử.

Biết block vs inline vs inline-block giải thích flow mặc định; `flex`/`grid` là cốt lõi của layout hiện đại; và sự khác biệt giữa `none` và `visibility` là một chi tiết hay được hỏi và quan trọng trong thực tế.