`box-sizing: border-box` thay đổi điều gì, và vì sao gần như dự án nào cũng đặt nó?

Chỗ khác biệt cắn đau nhất là khi trộn đơn vị: width: 50% cộng padding: 16px với content-box cho ra một phần tử rộng hơn nửa vùng cha, nên hai cái cạnh nhau xuống dòng. Với border-box thì hai cái vừa khít. Đây là lý do quy tắc *, *::before, *::after { box-sizing: border-box } trở thành dòng đầu tiên của gần như mọi file reset.

Cần nói thêm là border-box không tính margin — margin luôn nằm ngoài mọi cách tính. Và margin có một hành vi riêng dễ gây bất ngờ: margin theo chiều dọc của hai phần tử liền kề GỘP lại thành cái lớn hơn thay vì cộng dồn. Điều này không xảy ra trong flex hay grid container, và đó là một lý do rất thực tế khiến layout hiện đại ít gặp lỗi khoảng cách hơn.