💡 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: 31 tháng 5 năm 2026

Thêm khoảng trống nội bộ (Padding) | Hướng dẫn và bài tập

📌

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; }
Lệnh này sẽ tạo ra một khoảng trống 16px xung quanh nội dung đoạn văn. Nó giúp văn bản không bị "bó hẹp" và trở nên dễ đọc hơn nhiều.

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ínhVị tríMàu nền
padding**Bên trong** đường viềnCó áp dụng màu nền của phần tử
margin**Bên ngoài** đường viềnTrong suốt (không có màu nền)
Hãy tưởng tượng: "padding = lớp đệm bên trong khung ảnh", còn "margin = khoảng cách giữa khung ảnh và bức tường".

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.

Thử ngay

■ 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.

10pt

Thêm khoảng trống nội bộ (Padding)

Hãy thêm khoảng trống nội bộ (padding) là 16px cho thẻ p.

Nhấp vào lỗi để đánh dấu dòng. ✕=lỗi ⚠=cảnh báo ›=log.

Lộ trình học · Toàn bộ bài giảng

Đi sâu bài tập này

"Thêm khoảng trống nội bộ (Padding)" là bài HTML/CSS/JS mức 入門. Hãy thêm khoảng trống nội bộ (padding) là 16px cho thẻ p. Chạy ngay trên trình duyệt với kiểm tra tự động.

Padding là khoảng trống giữa nội dung của phần tử và đường viền của nó. Margin là khoảng trống bên ngoài đường viền. Mẫu tương tự xuất hiện trong review code và UI thực tế.

Kết hợp với lộ trình css-basic. Bài #18 củng cố kỹ năng css-basic.

Quy trình từng bước

  1. Đọc bài giải thích và nắm mục tiêu "Thêm khoảng trống nội bộ (Padding)"
  2. Kiểm tra cột HTML/CSS/JS và bắt đầu từ mã mẫu
  3. Mở gợi ý nếu bí, so sánh với lời giải
  4. Bấm Chạy để xem preview/console
  5. Hệ thống kiểm tra có chứa: padding, 16.
  6. Sau khi đúng, làm bài trước/sau trong cùng danh mục

Cách đọc mã giải

Mã giải dùng thẻ: p, style. Kiểm tra thẻ đóng và lồng nhau. CSS dùng: padding. Chú ý selector và chính tả. Giải thích: Padding là khoảng trống giữa nội dung của phần tử và đường viền của nó. Margin là khoảng trống bên ngoài đường viền. Gợi ý: Sử dụng thuộc tính padding.

Ứng dụng thực tế & nghề nghiệp

CSS cơ bản là nền trước Tailwind/Bootstrap. Màu, khoảng cách, typography tạo nhất quán thương hiệu.

Lỗi thường gặp

  • Bỏ qua gợi ý: Sử dụng thuộc tính padding.
  • Nhầm margin và padding
  • Thiếu # trong mã hex
  • Quên . khi chọn class

Xử lý sự cố

Preview không đổi sau khi chạy
Kiểm tra bạn sửa đúng cột HTML/CSS/JS và đã bấm Chạy.
Đúng nhưng không pass
Hệ thống kiểm tra có chứa: padding, 16. Kiểm tra typo và thẻ đóng.
Lỗi trên console
Mở DevTools Console, kiểm tra ngoặc và dấu ngoặc kép.
Khó gõ trên điện thoại
Dùng màn ngang hoặc mở cùng URL trên PC.

Mẹo phỏng vấn & portfolio

  • Giải thích kỹ thuật trong "Thêm khoảng trống nội bộ (Padding)" bằng lời của bạn trong 30 giây
  • Luyện mô tả từng dòng mã giải trên bảng trắng
  • Chuẩn bị một phương án thay thế và lý do chọn cách hiện tại

Thuật ngữ

color
Thuộc tính màu chữ.
padding
Khoảng cách bên trong phần tử.
margin
Khoảng cách bên ngoài phần tử.

Từ khóa trên trang này

Trang này là bài tập miễn phí về Thêm khoảng trống nội bộ (Padding) cho từ khóa: Thêm khoảng trống nội bộ (Padding), css-basic, 入門, p, style, padding, add padding.

Công cụ liên quan

Lộ trình học

Lộ trình học →

Bài tập liên quan

Câu hỏi thường gặp (FAQ)

Thêm khoảng trống nội bộ (Padding) có miễn phí không?

Bài tập này hoàn toàn miễn phí và chạy ngay trên trình duyệt. Không cần đăng ký hay thẻ tín dụng.

Độ khó và thời gian?

"Thêm khoảng trống nội bộ (Padding)" ở mức "入門". Đọc hướng dẫn trước; người mới thường hoàn thành trong 30 phút. Mỗi bài khoảng 5–15 phút. Dùng gợi ý, sau đó xem lời giải nếu bí.

Sau khi đúng làm gì?

Sau khi đúng, dùng liên kết bài tiếp theo. Hoàn thành danh mục rồi sang lộ trình học.

Làm trên điện thoại được không?

Chạy trên trình duyệt di động, nhưng gõ mã trên máy tính tiện hơn.

Bài tập khác ở đâu?

Danh sách bài tập: /vi/learn/ có bộ lọc danh mục.

Điểm cần nhớ trong "Thêm khoảng trống nội bộ (Padding)"?

Padding là khoảng trống giữa nội dung của phần tử và đường viền của nó. Margin là khoảng trống bên ngoài đường viền. Gợi ý: Sử dụng thuộc tính padding.

Vị trí danh mục css-basic?

CSS cơ bản là nền trước Tailwind/Bootstrap. Màu, khoảng cách, typography tạo nhất quán thương hiệu.

Các bước cụ thể cho "Thêm khoảng trống nội bộ (Padding)"?

1. Đọc bài giải thích và nắm mục tiêu "Thêm khoảng trống nội bộ (Padding)"
2. Kiểm tra cột HTML/CSS/JS và bắt đầu từ mã mẫu
3. Mở gợi ý nếu bí, so sánh với lời giải
4. Bấm Chạy để xem preview/console
5. Hệ thống kiểm tra có chứa: padding, 16.
6. Sau khi đúng, làm bài trước/sau trong cùng danh mục

Cách đọc mã giải?

Mã giải dùng thẻ: p, style. Kiểm tra thẻ đóng và lồng nhau.

CSS dùng: padding. Chú ý selector và chính tả.

Giải thích: Padding là khoảng trống giữa nội dung của phần tử và đường viền của nó. Margin là khoảng trống bên ngoài đường viền.

Gợi ý: Sử dụng thuộc tính padding.

Khi gặp sự cố?

Preview không đổi sau khi chạy → Kiểm tra bạn sửa đúng cột HTML/CSS/JS và đã bấm Chạy.
Đúng nhưng không pass → Hệ thống kiểm tra có chứa: padding, 16. Kiểm tra typo và thẻ đóng.
Lỗi trên console → Mở DevTools Console, kiểm tra ngoặc và dấu ngoặc kép.
Khó gõ trên điện thoại → Dùng màn ngang hoặc mở cùng URL trên PC.

Liên quan nghề nghiệp?

Giải thích kỹ thuật trong "Thêm khoảng trống nội bộ (Padding)" bằng lời của bạn trong 30 giây Luyện mô tả từng dòng mã giải trên bảng trắng Chuẩn bị một phương án thay thế và lý do chọn cách hiện tại

🛠️ Công cụ đề xuất

Nén ảnh & WebP

Làm nhẹ hình ảnh an toàn với xử lý local. Tăng tốc độ web tối đa.

Dùng thử →

Định dạng & Kiểm tra JSON

Định dạng JSON dễ đọc trong tích tắc. Kiểm tra lỗi cú pháp nhanh chóng.

Dùng thử →

Giải mã & Xác minh JWT

Phân tích nội dung token an toàn. Kiểm tra thời hạn và các xác nhận.

Dùng thử →