💡 Tôi đã chuẩn bị sẵn trình soạn thảo bên dưới bài viết. Bạn có thể thử nghiệm thoải mái!
Cập nhật: 2025年3月1日
Thêm khoảng trống nội bộ (Padding)
📌
Kết luận
Dùng padding để tạo khoảng trống bên trong phần tử
📝 Mã thực tế tại đây
p { padding: 16px; }Phân biệt padding và margin
Có hai loại khoảng trống trong CSS mà người mới bắt đầu thường hay nhầm lẫn.| Thuộc tính | Vị trí | Màu nền |
|---|---|---|
padding | **Bên trong** đường viền | Có áp dụng màu nền của phần tử |
margin | **Bên ngoài** đường viền | Trong suốt (không có màu nền) |
Cách chỉ định chi tiết
📝 Mã thực tế tại đây
padding: 16px; /* Cả 4 phía: trên, dưới, trái, phải */
padding: 8px 16px; /* (Trên & Dưới) (Trái & Phải) */
padding: 8px 16px 24px 32px; /* Theo chiều kim đồng hồ: Trên, Phải, Dưới, Trái */Tổng kết
-padding là khoảng trống bên trong, margin là khoảng trống bên ngoài
- padding: 16px tạo khoảng trống đều ở cả 4 phía
- Có thể chỉ định riêng cho từng phía theo chiều kim đồng hồ
Hãy thử trong phần bài tập
Hãy thử thêm padding: 16px cho thẻ p nhé.🧪 Thử nghiệm tại đây
Bạn có thể viết mã thực tế vào trình soạn thảo bên dưới và xem ngay kết quả. Đừng sợ làm hỏng, bạn có thể thử lại bao nhiêu lần tùy thích.
■ Bài tập thực hành
Hãy thêm khoảng trống nội bộ (padding) là 16px cho thẻ p.
Gợi ý khi gặp khó khăn
Sử dụng thuộc tính padding.