Spacing — margin and padding · Khoảng cách — margin và padding
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
Space between boxes
- Margin is the space outside a box — the gap to its neighbours.
margin: 30px;adds 30 pixels on all four sides, outside the border.- Padding pushes the content in; margin pushes other boxes away.
Tiếng Việt
Khoảng cách giữa các box
- Margin (khoảng cách ngoài) là không gian bên ngoài một box — khoảng cách đến các bạn bè xung quanh.
margin: 30px;thêm 30 pixels ở cả bốn phía, bên ngoài border (viền).- Padding (vùng đệm) đẩy nội dung vào trong; margin (khoảng cách ngoài) đẩy các box khác ra xa.
English
One side at a time
- You can space just one side:
margin-top,margin-right,margin-bottom,margin-left. - The same works for padding:
padding-left: 10px;, and so on. margin-bottomunder a heading neatly separates it from the text.
Tiếng Việt
Một mặt tại một lần
- Bạn có thể chỉ đặt khoảng cách cho một mặt:
margin-top,margin-right,margin-bottom,margin-left. - Điều tương tự cũng đúng với padding:
padding-left: 10px;, v.v. margin-bottomdưới một tiêu đề tách biệt nó gọn gàng khỏi văn bản.
<style>
.tag {
background-color: gold;
padding: 6px;
margin-right: 8px;
}
</style>
<span class="tag">news</span>
<span class="tag">sport</span>
English
Common mistakes
- Padding is inside the border; margin is the space outside it.
box-sizing: border-boxmakes the width include padding and border.
Tiếng Việt
Lỗi thường gặp
- Padding (vùng đệm) nằm bên trong border (viền); margin (khoảng cách ngoài) là không gian bên ngoài nó.
box-sizing: border-boxlàm cho chiều rộng bao gồm cả padding và border.
English
Now you try
- Margin is the gap between boxes; padding is the space inside one.
- Add margin around a box, then space below a heading.
Tiếng Việt
Bây giờ bạn thử
- Margin (khoảng cách ngoài) là khoảng trống giữa các box; padding (vùng đệm) là không gian bên trong một cái.
- Thêm margin quanh một box, sau đó thêm khoảng cách bên dưới một tiêu đề.
Explore · Khám phá
margin vs padding · margin so với padding
Padding is space inside the border; margin is space outside. · Padding là khoảng cách bên trong border; margin là khoảng cách bên ngoài.
Push the boxes apart from each other. Add margin: 30px; to the .box rule. · Đẩy các hộp ra xa nhau. Thêm margin: 30px; vào quy tắc .box.
Add space below the heading only. Add h1 { margin-bottom: 24px; }. · Chỉ thêm khoảng trắng phía dưới tiêu đề. Thêm h1 { margin-bottom: 24px; }.