The box model · Mô hình hộp
This page needs a recent browser (with SharedArrayBuffer support). Please update Chrome, Edge, Firefox or Safari to the latest version. · Trang này cần trình duyệt gần đây (hỗ trợ SharedArrayBuffer). Vui lòng cập nhật Chrome, Edge, Firefox hoặc Safari lên phiên bản mới nhất.
English
Every box has layers
- CSS treats every element as a box.
- Content is your text or image. Padding is space inside, around the content.
- Border is a line around the padding. Margin is space outside, pushing other boxes away.
Tiếng Việt
Mọi khung đều có nhiều lớp
- CSS xem xét mọi phần tử như một khung.
- Nội dung là văn bản hoặc hình ảnh của bạn. Khoảng đệm (Padding) là khoảng trống bên trong, bao quanh nội dung.
- Border (viền) là đường viền bao quanh vùng đệm. Margin (khoảng cách ngoài) là khoảng trống ở bên ngoài, đẩy các hộp khác ra xa.
English
Padding and border
padding: 20px;adds 20 pixels of space inside, on all four sides.border: 2px solid black;draws a line — its width, style, then colour.- Padding makes a box feel roomy; a border makes it stand out.
Tiếng Việt
Vùng đệm và Viền
padding: 20px;thêm 20像素 của không gian bên trong, ở cả bốn phía.border: 2px solid black;vẽ một đường — độ rộng, kiểu dáng, sau đó là màu sắc.- Padding (vùng đệm) làm cho một box cảm thấy thoáng đãng; border (viền) làm cho nó nổi bật.
<style>
.card {
background-color: #eef;
padding: 16px;
border: 2px solid #88a;
}
</style>
<div class="card">A comfy padded card.</div>
English
Common mistakes
- The box model is content, then padding, then border, then margin (inside to outside).
- Padding adds space inside the border.
Tiếng Việt
Lỗi thường gặp
- Mô hình box (box model) là nội dung, rồi đến padding, border, và margin (từ trong ra ngoài).
- Padding (vùng đệm) thêm không gian bên trong border (viền).
English
Now you try
- Padding is inside; the border sits around it.
- Add padding to a box, then a border.
Tiếng Việt
Bây giờ bạn thử
- Padding (vùng đệm) nằm bên trong; border (viền) nằm bao quanh nó.
- Thêm padding vào một box, sau đó thêm border.
Explore · Khám phá
The CSS box model · Mô hình CSS box
Every box is content + padding + border + margin around it. · Mọi hộp đều là nội dung + padding + border + margin xung quanh nó.
Give the box some breathing room inside. Add padding: 20px; to the .box rule. · Tạo khoảng trống cho hộp bên trong. Thêm padding: 20px; vào quy tắc .box.
Draw a line around the box. Add border: 2px solid navy; to the .box rule — keep the three parts in that order: width, style, colour. · Vẽ một đường bao quanh hộp. Thêm border: 2px solid navy; vào quy tắc .box — giữ ba phần theo thứ tự đó: chiều rộng, phong cách, màu sắc.