Bạn sẽ nhìn một hộp có width, padding và border, tính chiều rộng ngoài rồi dùng border-box để quản lý kích thước dễ hơn. Khoảng cách bên trong và khoảng cách bên ngoài được giải thích bằng cùng một ví dụ.

Dùng tiếp website Góc học web từ môn HTML. Mỗi thư mục ví dụ là một phiên bản độc lập: before.html và before.css để so sánh, index.html và styles.css là kết quả sau bài học. Hãy sửa một quy tắc, tải lại và giải thích điều thay đổi.

Mỗi hộp có những lớp nào?

Content chứa nội dung. Padding nằm giữa nội dung và đường viền. Border bao quanh padding. Margin tạo khoảng cách ngoài border. Nếu thấy chữ chạm đường viền, thường cần kiểm tra padding; nếu hai card quá sát nhau, kiểm tra khoảng cách giữa hộp, chẳng hạn gap trong layout.

Outline không nằm trong cách tính kích thước hộp như border và thường hữu ích cho focus. Đừng xóa outline để sửa một vấn đề chiều rộng chưa được hiểu.

Tính một ví dụ cụ thể

Với content-box, width:240px đặt chiều rộng content. Nếu padding trái/phải mỗi bên 20px và border mỗi bên 4px, bề rộng border box là 240 + 40 + 8 = 288px, chưa tính margin. Nếu vùng chứa chỉ rộng 260px, bạn có thể thấy hộp tràn.

Với border-box, width bao gồm content, padding và border. Khai báo width:240px trong ví dụ có thể giữ bề rộng ngoài 240px; content còn 192px. Margin vẫn ở ngoài và không được gộp vào width.

Đặt nền tảng box-sizing nhất quán

Một quy tắc phổ biến là áp dụng border-box cho mọi phần tử và pseudo-element. Nó làm việc tính bố cục thuận tiện hơn, không tự sửa mọi lỗi overflow. Một ảnh có chiều rộng cố định lớn hoặc một chuỗi không thể ngắt vẫn có thể đẩy nội dung ra ngoài.

Dùng max-width:100% trong hộp mẫu để nó không vượt vùng chứa hẹp. Khi học Flexbox và Grid, ta sẽ gặp thêm giới hạn kích thước nội tại và min-width:auto, không nên cho rằng border-box đã giải quyết tất cả.

Margin không luôn cộng dồn theo cách bạn nghĩ

Một số margin dọc trong normal flow có thể collapse, nên hai đoạn có margin không nhất thiết tạo tổng khoảng cách bằng phép cộng đơn giản. Các trường hợp margin âm còn phức tạp hơn. Trong Flexbox và Grid, gap thường là công cụ rõ ràng cho khoảng cách giữa các item.

Mở Box Model trong DevTools và di chuột qua từng lớp để xem màu đánh dấu. Cách này trực quan hơn việc đổi margin và padding qua lại cho đến khi nhìn gần đúng.

Mã của phần đang học

Giữ lại cấu trúc HTML có ý nghĩa. Đoạn dưới là phần HTML liên quan đến tình huống; bộ tải về có cả tài liệu hoàn chỉnh và stylesheet tích lũy từ các bài trước.

<div class="sample-box">Hộp 240px, padding 20px và border 4px.</div>

Thêm hoặc sửa trong styles.css

*, *::before, *::after { box-sizing: border-box; }
.sample-box {
  width: 240px;
  max-width: 100%;
  padding: 20px;
  border: 4px solid #247c9c;
  margin-block: 1rem;
  background: #e9f5fb;
}

So sánh trước và sau

Trong bản trước, ví dụ cố tình dùng content-box nên border box rộng 288px ở vùng đủ rộng. Bản sau dùng border-box và có max-width để quan sát cách kích thước được kiểm soát.

Xem trước khi sửa · Xem sau khi sửa · Tải 20 phiên bản và website hoàn chỉnh

Lỗi thường gặp và cách sửa

• Tính margin vào width của border-box: margin vẫn ở ngoài.
• Dùng padding để sửa mọi khoảng cách: xác định khoảng cách trong hay giữa hộp.
• Thấy khoảng cách dọc không cộng đúng rồi thêm br: kiểm tra margin collapsing.

Tự kiểm tra

• Tính lại content nếu width 240px, padding 20px và border 4px với border-box.
• Dùng Box Model kiểm chứng số thay vì chỉ nhìn bằng mắt.

Những điều cần nhớ

Đối chiếu kết quả với mục tiêu của bài, không chỉ nhìn xem giao diện có giống ảnh mẫu. Dùng DevTools kiểm tra quy tắc thực sự được áp dụng và thử một nội dung dài hơn hoặc khung nhìn hẹp hơn trước khi kết luận đã xong.

Đọc thêm khi cần

Tài liệu gốc về chủ đề này trên MDN

Mục lục CSS 20 bài · Ôn lại HTML