Cách hoạt động của thuộc tính CSS Box Sizing

Tìm hiểu cách dùng thuộc tính CSS box-sizing để kiểm soát cách trình duyệt tính toán và render chiều rộng và chiều cao của phần tử HTML.

box-sizing (content-box vs border-box)

Thuộc tính CSS box-sizing có hai giá trị:

content-box (mặc định)
border-box

Cả hai giá trị box-sizing ảnh hưởng đến cách trình duyệt tính toán và render kích thước phần tử HTML, nhưng đó là điều duy nhất chúng có chung.

content-box

Mặc định tất cả phần tử HTML dùng giá trị content-box:

box-sizing: content-box;

Điều này có nghĩa nếu bạn có phần tử với kiểu sau:

div { width: 100px; height: 100px; padding: 16px; border: 1px solid; }

Thì chiều rộng và chiều cao của phần tử được tính là 134px, không phải 100px như bạn chỉ định trong CSS. Kết quả:

Nếu muốn kiểm tra kích thước, bật Element Inspector trình duyệt:

Mac: Cmd + Shift + C
Windows: Ctrl + Shift + C

Sau đó di chuột qua phần tử để xem kích thước.

Điều này xảy ra vì content-box cộng giá trị width/height với border (1px mỗi bên) và padding (16px mỗi bên), render kích thước phần tử bằng tổng các giá trị đó:

Chiều rộng phần tử: 1 + 16 + 100 + 16 + 1 = 134 pixel.
Chiều cao phần tử: 1 + 16 + 100 + 16 + 1 = 134 pixel.

Hành vi mặc định từ content-box có thể khá phiền toái, nhưng may mắn thay, dễ dàng thay đổi!

Khai báo mặc định box-sizing: content-box được kế thừa từ User Agent Stylesheet, tích hợp trong mọi trình duyệt web.

border-box cứu vãn

Bạn có thể dễ dàng ghi đè giá trị content-box với border-box, có hiệu ứng ngược lại cách trình duyệt tính kích thước phần tử:

box-sizing: border-box;

Bằng cách đặt box-sizing thành border-box, trình duyệt sẽ render phần tử tại chính xác chiều rộng và chiều cao bạn chỉ định trên phần tử với thuộc tính height và width:

div { width: 100px; height: 100px; padding: 16px; border: 1px solid; box-sizing: border-box; }

Kết quả:

Giá trị border-box làm trình duyệt bao gồm (không cộng) giá trị padding và border đã chỉ định khi tính tổng chiều rộng và chiều cao phần tử.

Với border-box, không kể giá trị padding hoặc border bạn thêm, tổng kích thước phần tử sẽ là giá trị bạn chỉ định trên height và width.

Cho chắc ăn, đây là so sánh cạnh nhau:

Cả hai phần tử trên có width và height chỉ định 100 pixel, nhưng chỉ phần tử thứ 2 tôn trọng giá trị đó vì dùng border-box.

content-box vs border-box tóm lại:

content-box cộng giá trị padding và border với height/width phần tử và render tổng.
border-box bao gồm padding và border như một phần của width/height phần tử.

Dùng border-box mọi nơi

Bây giờ bạn biết border-box làm trình duyệt render phần tử HTML tại kích thước thực bạn chỉ định trong CSS. Nhưng làm sao áp dụng border-box cho tất cả phần tử HTML?

Đơn giản như thêm quy tắc CSS sau ở đầu bảng định kiểu:

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

Mã trên dùng bộ chọn toàn cầu CSS * áp dụng giá trị border-box cho thuộc tính box-sizing trên:

Tất cả bộ chọn phần tử bình thường (div, p, button, v.v.)
Tất cả bộ chọn giả :before và :after

Bằng cách dùng border-box trên tất cả phần tử HTML, bạn không còn lo trình duyệt render kích thước phần tử như thế nào. Nó luôn là height và width bạn tự chỉ định.