Login

CSS box model: hiểu margin, padding, border một lần cho xong

  • author-image

    Nguyễn Đình Cường

  • blog-tag
  • blog-comment 0 comment
  • created-date 09 Nov, 2026
blog-thumbnail

Mọi phần tử trên trang web đều là một chiếc hộp hình chữ nhật. Hiểu cách trình duyệt tính kích thước chiếc hộp đó giải quyết được rất nhiều câu hỏi kiểu "sao phần tử này rộng hơn tôi đặt?" hay "sao có khoảng trống lạ ở đây?".

Bốn lớp của chiếc hộp

Từ trong ra ngoài, một phần tử gồm:

  1. Content: vùng nội dung thật, như chữ hoặc ảnh.
  2. Padding: khoảng đệm giữa nội dung và đường viền, nằm bên trong phần tử và có cùng màu nền.
  3. Border: đường viền bao quanh padding.
  4. Margin: khoảng cách bên ngoài, đẩy các phần tử khác ra xa. Margin luôn trong suốt.

Cách dễ nhớ: padding là "khoảng thở" bên trong hộp, margin là khoảng cách giữa các hộp.

Cách viết ngắn gọn

Các thuộc tính này nhận một đến bốn giá trị:

.card {
  padding: 16px;              /* cả bốn phía */
  padding: 8px 16px;         /* trên-dưới, trái-phải */
  padding: 8px 12px 16px 4px; /* trên, phải, dưới, trái */
  border: 1px solid #ccc;
  margin: 0 auto;            /* căn giữa ngang nếu có width */
}

Nhớ thứ tự bốn giá trị là trên, phải, dưới, trái, tức theo chiều kim đồng hồ bắt đầu từ phía trên.

Cạm bẫy lớn nhất: width không như bạn nghĩ

Mặc định, width chỉ tính vùng content. Nghĩa là nếu bạn đặt width: 300px rồi thêm padding: 20px và border: 2px, tổng chiều rộng thật là 300 + 40 + 4 = 344 pixel. Chuyện này làm bố cục nhiều cột hay bị tràn.

Giải pháp là box-sizing: border-box, khi đó width bao gồm cả padding và border, và nội dung tự co lại. Hầu hết dự án đều đặt quy tắc này cho mọi phần tử:

*,
*::before,
*::after {
  box-sizing: border-box;
}

Với dòng này, width: 300px nghĩa là cái hộp chiếm đúng 300 pixel, và việc tính toán bố cục trở nên trực quan hơn nhiều.

Margin collapse: khi hai margin gộp lại

Margin theo chiều dọc của hai khối liền nhau có thể gộp thành một, lấy giá trị lớn hơn thay vì cộng dồn. Ví dụ đoạn văn trên có margin-bottom: 20px và đoạn dưới có margin-top: 30px, khoảng cách thật là 30 pixel chứ không phải 50.

Điều này có thể gây bất ngờ, nhất là khi margin của con "chui" ra ngoài cha. Margin collapse không xảy ra với flex hoặc grid item, nên nhiều người chọn các cách bố cục này, hoặc dùng thuộc tính gap để tránh rắc rối.

Inline và block

  • Phần tử block (như div, p, h2) chiếm cả hàng, nhận đầy đủ width, height, margin, padding.
  • Phần tử inline (như span, a) nằm trong dòng chữ, bỏ qua width và height, và margin theo chiều dọc không đẩy được dòng khác.
  • Phần tử inline-block nằm trong dòng nhưng vẫn nhận kích thước.

Nếu bạn đặt width cho một span mà không thấy tác dụng, nguyên nhân thường nằm ở đây.

Dùng DevTools để nhìn thấy chiếc hộp

Trong trình duyệt, nhấp phải vào phần tử rồi chọn Inspect. Ở tab Computed (hoặc phần Layout) bạn sẽ thấy sơ đồ box model với từng con số của margin, border, padding và content. Di chuột lên phần tử, vùng margin hiện màu cam, padding màu xanh lá. Đây là cách nhanh nhất để biết khoảng trống kỳ lạ xuất phát từ đâu.

Ví dụ: một thẻ card hoàn chỉnh

Hãy áp dụng những gì vừa học vào một thẻ thông tin đơn giản:

.card {
  box-sizing: border-box;
  width: 320px;
  padding: 20px;
  margin: 16px auto;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
}

.card h3 {
  margin: 0 0 8px;
}

.card p {
  margin: 0;
}

Nhờ border-box, thẻ này luôn rộng đúng 320 pixel bất kể padding hay border. Việc đặt margin: 0 cho tiêu đề và đoạn văn bên trong giúp bạn kiểm soát khoảng cách bằng padding của thẻ cha, thay vì phụ thuộc vào margin mặc định của trình duyệt vốn khác nhau giữa các thẻ.

Ngoài ra, bạn nên làm quen với đơn vị tương đối như rem và % cho padding và margin để giao diện co giãn tốt theo cỡ chữ và kích thước màn hình, thay vì chỉ dùng pixel cố định.

Kết luận

Hãy nhớ ba điều: các lớp content, padding, border, margin; luôn dùng box-sizing: border-box; và biết rằng margin dọc có thể gộp lại. Chỉ cần vững ba ý này, bạn đã tránh được phần lớn lỗi bố cục của người mới.

Để luyện tập box model qua các bài thực hành xây giao diện thật, bạn có thể tham khảo khóa học web trên codebem.com.

author_photo
Nguyễn Đình Cường

0 comment