Trong thiết kế web, việc kiểm soát kích thước của các phần tử là một yếu tố quan trọng giúp giao diện hiển thị đúng như mong muốn. Một trong những thuộc tính quan trọng trong CSS giúp bạn kiểm soát kích thước của hộp (box) là box-sizing. Trong đó, giá trị border-box được sử dụng rộng rãi để đảm bảo kích thước phần tử luôn giữ nguyên bất kể có thêm padding hay border.

Bài viết này sẽ giúp bạn hiểu rõ về border-box, so sánh với các giá trị khác của box-sizing và hướng dẫn cách ứng dụng hiệu quả trong thiết kế web.

1.1. Box Model trong CSS

Trước khi đi sâu vào khái niệm border-box, chúng ta cần hiểu về CSS Box Model, một mô hình quan trọng trong thiết kế web. Mô hình này mô tả cách trình duyệt tính toán kích thước của một phần tử HTML. Mỗi phần tử trên trang web được trình duyệt hiển thị dưới dạng một hộp hình chữ nhật, và hộp này bao gồm các phần chính như sau:

• Content (Nội dung): Đây là phần chính của phần tử, nơi chứa văn bản, hình ảnh hoặc bất kỳ nội dung nào khác.

• Padding (Lề trong): Khoảng cách giữa nội dung và viền phần tử.

• Border (Viền): Đường viền bao quanh phần tử, có thể có độ dày và màu sắc khác nhau.

• Margin (Lề ngoài): Khoảng trống giữa phần tử này và các phần tử khác trên trang.

Ví dụ về Box Model:

<div class="box">Nội dung</div>

.box {
  width: 200px;
  padding: 20px;
  border: 5px solid black;
  margin: 10px;
}

Tổng chiều rộng của .box sẽ được tính theo công thức:

Tổng chiều rộng = width + (padding * 2) + (border * 2) + (margin * 2)

Nếu áp dụng công thức trên:

Tổng chiều rộng = 200px + (20px * 2) + (5px * 2) + (10px * 2) = 270px

Mô hình này giúp chúng ta hiểu cách phần tử được hiển thị trên trang web, nhưng nó cũng có một số nhược điểm khi làm việc với bố cục phức tạp.

1.2. Sự khác biệt giữa content-box và border-box

Thuộc tính box-sizing trong CSS xác định cách trình duyệt tính toán kích thước tổng thể của một phần tử. Nó có hai giá trị chính:

• content-box (giá trị mặc định): Kích thước của phần tử chỉ bao gồm phần nội dung, còn padding và border sẽ làm tăng kích thước tổng thể.

• border-box: Kích thước tổng thể của phần tử bao gồm cả padding và border, giúp giữ nguyên tổng kích thước phần tử bất kể padding hoặc border có giá trị bao nhiêu.

Ví dụ so sánh giữa hai giá trị này:

.div1 {
  width: 200px;
  padding: 20px;
  border: 5px solid black;
  box-sizing: content-box;
}

.div2 {
  width: 200px;
  padding: 20px;
  border: 5px solid black;
  box-sizing: border-box;
}

Với .div1, tổng chiều rộng của phần tử sẽ là:

Tổng chiều rộng = 200px (content) + 40px (padding) + 10px (border) = 250px

Với .div2, tổng chiều rộng vẫn giữ nguyên là 200px, vì trình duyệt đã tính cả padding và border vào trong kích thước của phần tử.

2.1. Dễ dàng kiểm soát kích thước phần tử

Một trong những lợi ích lớn nhất của border-box là giúp bạn kiểm soát kích thước phần tử dễ dàng hơn. Khi thiết kế một trang web, bạn có thể đặt phần tử với kích thước cố định mà không cần tính toán lại padding và border.

Ví dụ:

.button {
  width: 100px;
  padding: 10px;
  border: 2px solid black;
  box-sizing: border-box;
}

Với border-box, kích thước của nút bấm vẫn là 100px, bất kể padding hay border có thay đổi thế nào.

2.2. Tránh lỗi tràn nội dung (overflow)

Trong một số trường hợp, khi bạn sử dụng content-box, nội dung có thể bị tràn ra ngoài nếu không tính toán đúng padding và border. Điều này đặc biệt quan trọng khi bạn thiết kế bố cục có kích thước giới hạn, chẳng hạn như card, menu hoặc ô nhập liệu.

Ví dụ:

.card {
  width: 300px;
  padding: 20px;
  border: 5px solid black;
  box-sizing: border-box;
}

Nhờ border-box, phần tử .card vẫn giữ nguyên kích thước 300px, giúp thiết kế đồng bộ hơn.

2.3. Tương thích tốt với thiết kế responsive

Ngày nay, thiết kế web cần phải thích ứng với nhiều kích thước màn hình khác nhau. border-box giúp bạn dễ dàng kiểm soát kích thước phần tử trong thiết kế responsive mà không cần điều chỉnh padding và border riêng lẻ.

Các framework CSS như Bootstrap sử dụng border-box để đảm bảo các cột trong lưới (grid) luôn có kích thước chính xác. Ví dụ:

.col {
  width: 25%;
  padding: 10px;
  box-sizing: border-box;
}

Khi sử dụng border-box, bạn có thể chắc chắn rằng cột sẽ không vượt quá kích thước đã định, ngay cả khi có thêm padding hoặc border.

3.1. Đặt giá trị border-box mặc định cho toàn bộ trang
Bạn có thể áp dụng border-box cho toàn bộ trang bằng cách đặt thuộc tính này trong CSS:

css

CopyEdit

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

Cách này đảm bảo tất cả các phần tử trên trang sẽ tuân theo quy tắc border-box, giúp tránh lỗi khi thiết kế layout.

3.2. Sử dụng trong các hệ thống lưới (grid systems)
Khi thiết kế giao diện theo dạng lưới (grid), border-box giúp các cột có kích thước chính xác mà không bị thay đổi bởi padding hoặc border:

css

CopyEdit

.column { width: 33.33%; padding: 10px; border: 2px solid #333; box-sizing: border-box; float: left; }

Mỗi cột sẽ chiếm đúng 1/3 chiều rộng mà không bị thay đổi bởi padding hay border.

3.3. Khi nào không nên dùng Border Box?

• Khi bạn muốn nội dung giữ đúng kích thước và padding/border mở rộng ra ngoài.

• Khi làm việc với một số thư viện CSS cũ không hỗ trợ border-box.