CSS bố cục và hiển thị phần tử

1. Box Model

Mỗi phần tử HTML được coi như một “hộp” gồm 4 lớp:

Content: nội dung chính (văn bản, hình ảnh).
Padding: khoảng cách giữa nội dung và viền (border).
Border: đường viền bao quanh phần tử.
Margin: khoảng cách bên ngoài viền, tạo không gian giữa phần tử với các phần tử khác. 👉 Ví dụ:

div {
  margin: 20px;
  padding: 10px;
  border: 2px solid black;
}

→ Nội dung cách phần tử khác 20px, cách viền 10px.

2. Display

Quy định cách phần tử hiển thị:

block: chiếm toàn bộ chiều ngang, bắt đầu trên dòng mới (ví dụ: <div>, <p>).
inline: chỉ chiếm không gian vừa đủ nội dung, không xuống dòng (ví dụ: <span>, <a>).
flex: dùng Flexbox để sắp xếp phần tử con theo trục ngang/dọc, linh hoạt.
grid: tạo bố cục dạng lưới 2 chiều, mạnh mẽ cho thiết kế phức tạp.
none: ẩn phần tử khỏi giao diện (không chiếm không gian).

3. Position

Xác định vị trí phần tử trong trang:

Ví dụ: thanh menu cố định trên đầu trang thường dùng position: fixed.

4. Float và Clear

Float: cho phép phần tử “nổi” sang trái hoặc phải, để văn bản hoặc phần tử khác bao quanh.
```
img {
  float: left;
  margin-right: 10px;
}
```
→ Hình ảnh nằm bên trái, văn bản sẽ bao quanh bên phải.
Clear: ngăn phần tử bị ảnh hưởng bởi float.
```
p {
  clear: both;
}
```
→ Đoạn văn sẽ xuống dưới, không bị tràn quanh hình ảnh.

Nhathacomputer.com