Box Model là gì?
Mọi phần tử HTML được trình duyệt biểu diễn như một hộp hình chữ nhật gồm 4 lớp từ trong ra ngoài:
\[\text{content} \subset \text{padding} \subset \text{border} \subset \text{margin}\]- Content — vùng chứa nội dung thực (text, hình ảnh…)
- Padding — khoảng trắng giữa content và border (trong suốt, mang màu nền)
- Border — đường viền bao quanh padding
- Margin — khoảng cách bên ngoài border đến phần tử khác (luôn trong suốt)
Cú pháp shorthand
/* 4 giá trị: trên phải dưới trái (theo chiều kim đồng hồ) */
padding: 10px 20px 10px 20px;
/* 3 giá trị: trên | trái-phải | dưới */
margin: 10px 20px 5px;
/* 2 giá trị: trên-dưới | trái-phải */
padding: 8px 16px;
/* 1 giá trị: tất cả 4 cạnh */
margin: 0;
Các thuộc tính xác định từng cạnh riêng: padding-top, padding-right, padding-bottom, padding-left (tương tự cho margin và border-*).
box-sizing
Thuộc tính này quyết định width/height bạn đặt tính đến đâu.
| Giá trị | width bao gồm |
|---|---|
content-box (mặc định) |
Chỉ content — padding và border cộng thêm vào |
border-box |
Content + padding + border — dễ tính toán hơn |
/* Reset toàn cục — thực tiễn tốt nhất */
*, *::before, *::after {
box-sizing: border-box;
}
width, height, min/max
.box {
width: 300px; /* Chiều rộng cố định */
height: auto; /* Chiều cao tự động theo nội dung */
min-width: 200px; /* Không nhỏ hơn */
max-width: 600px; /* Không lớn hơn */
min-height: 100px;
}
max-width: 100%ngăn phần tử tràn ra ngoài container khi màn hình nhỏ.
display và box model
display |
Ứng xử box |
|---|---|
block |
Chiếm cả dòng, tuân đầy đủ box model (width, height, margin, padding) |
inline |
Chỉ rộng vừa nội dung, không áp dụng width/height, margin trên-dưới không có tác dụng |
inline-block |
Cùng dòng nhưng tuân đầy đủ box model |
Xem trong DevTools
Mở F12 → Elements → Styles → Computed → thấy hộp màu với các vùng padding, border, margin thực tế. Đây là công cụ không thể thiếu để debug layout.
Demo: Trực quan box model
<div class="box-demo">
<div class="margin-layer">
margin
<div class="border-layer">
border
<div class="padding-layer">
padding
<div class="content-layer">content</div>
</div>
</div>
</div>
</div>
<p style="margin-top:1rem;font-size:.9em;color:#666">
Mỗi lớp màu biểu diễn một tầng của box model.
</p>
.box-demo { display: flex; justify-content: center; padding: 8px; }
.margin-layer {
background: #ffd7b5;
padding: 24px;
font-size: .8em;
color: #a0522d;
text-align: center;
}
.border-layer {
background: #fffacd;
border: 12px solid #e6a817;
padding: 20px;
color: #7a6000;
}
.padding-layer {
background: #d4edda;
padding: 20px;
color: #155724;
}
.content-layer {
background: #cce5ff;
padding: 16px 32px;
color: #004085;
font-weight: bold;
border: 1px dashed #004085;
}
Demo: content-box vs border-box
<h3>Cả hai đều khai báo <code>width: 200px</code></h3>
<p><strong>content-box</strong> (mặc định):</p>
<div class="content-box-demo">
Nội dung
</div>
<p class="note">Chiều rộng thực = 200 + 20×2 (padding) + 4×2 (border) = <strong>248px</strong></p>
<p><strong>border-box</strong>:</p>
<div class="border-box-demo">
Nội dung
</div>
<p class="note">Chiều rộng thực = <strong>200px</strong> (bao gồm cả padding + border)</p>
.content-box-demo, .border-box-demo {
width: 200px;
padding: 20px;
border: 4px solid #4472c4;
background: #e3f0ff;
margin-bottom: 4px;
}
.content-box-demo {
box-sizing: content-box; /* mặc định */
background: #ffeeba;
border-color: #e09a00;
}
.border-box-demo {
box-sizing: border-box;
background: #d4edda;
border-color: #28a745;
}
.note {
font-size: .85em;
color: #555;
margin-bottom: 1rem;
}
Bình luận