1. Box Model là gì?
Trong CSS, mọi phần tử HTML đều được coi là một “hộp” (box) gồm 4 lớp:
+-----------------------------+
| Margin |
| +-----------------------+ |
| | Border | |
| | +-----------------+ | |
| | | Padding | | |
| | | +-----------+ | | |
| | | | Content | | | |
| | | +-----------+ | | |
| | +-----------------+ | |
| +-----------------------+ |
+-----------------------------+
2. Các thành phần trong Box Model
a. Content – nội dung thực tế (text, ảnh…)
width: 300px;
height: 150px;
→ Kích thước phần nội dung.
b. Padding – khoảng cách bên trong, giữa nội dung và viền
padding: 20px;
→ Tạo khoảng trắng giữa nội dung và viền.
c. Border – đường viền bao quanh phần tử
border: 2px solid #333;
→ Có thể đổi màu, kiểu viền: solid, dashed, dotted…
d. Margin – khoảng cách bên ngoài, giữa phần tử này với phần tử khác
margin: 30px;
→ Dùng để “đẩy” phần tử ra xa các phần tử khác.
3. Minh hoạ đơn giản
.box {
width: 200px;
height: 100px;
padding: 20px;
border: 5px solid black;
margin: 30px;
}
→ Tổng kích thước bên ngoài:
- Chiều rộng thực tế:
= content (200px) + padding trái/phải (40px) + border trái/phải (10px)
= 250px - Chiều cao thực tế:
= content (100px) + padding trên/dưới (40px) + border trên/dưới (10px)
= 150px
Margin không tính vào kích thước hộp, nhưng tạo khoảng cách giữa các phần tử.
4. Mẹo: Dùng box-sizing: border-box
Mặc định, CSS tính kích thước chỉ là content.
Muốn tính cả padding + border trong width và height → dùng:
* {
box-sizing: border-box;
}
→ Giúp dễ kiểm soát bố cục hơn nhiều.
5. Viết tắt (shorthand)
| Cụ thể | Gộp lại |
|---|---|
margin-top, margin-right, margin-bottom, margin-left | margin: 10px 20px 30px 40px; |
padding-top, ... | padding: 10px 15px; |
Quy tắc:
- 1 giá trị: áp dụng cho tất cả
- 2 giá trị: trên/dưới – trái/phải
- 3 giá trị: trên – trái/phải – dưới
- 4 giá trị: trên – phải – dưới – trái (chiều kim đồng hồ)
6. Thực hành
style.css
.box {
width: 250px;
height: 150px;
background-color: #fce4ec;
padding: 20px;
border: 5px dashed #e91e63;
margin: 30px auto;
box-sizing: border-box;
}
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Bài 6 – Box Model</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="box">
Đây là phần nội dung bên trong một box model.
</div>
</body>
</html>
7. Ghi nhớ
| Thành phần | Vị trí | Tác dụng |
|---|---|---|
| Content | Giữa | Hiển thị nội dung (text, ảnh) |
| Padding | Bên trong | Cách viền và nội dung |
| Border | Bao viền | Viền bao quanh padding |
| Margin | Bên ngoài | Cách các phần tử khác |
Thảo luận