Thuộc tính box-sizing cho phép chúng tôi gộp phần đệm và đường viền trong tổng chiều rộng và chiều cao của phần tử

1. Khi phần tử không sử dụng thuộc tính box-sizing trong CSS

Theo mặc định, chiều rộng và chiều cao của một phần tử được tính như sau:

  • width + padding + border = chiều rộng thực của một phần tử
  • height + padding + border = chiều cao thực của một phần tử

Điều này có nghĩa là: Khi bạn đặt chiều rộng / chiều cao của một phần tử, phần tử thường xuất hiện lớn hơn bạn đã đặt (vì đường viền và phần đệm của phần tử được thêm vào chiều rộng / chiều cao được chỉ định của phần tử)

Ví dụ:

Thuộc tính box-sizing trong CSS giải quyết vấn đề này

2. Khi phần tử sử thuộc tính box-sizing trong CSS

Thuộc tính box-sizing cho phép chúng tôi gộp phần đệm và đường viền trong tổng chiều rộng và chiều cao của phần tử

Nếu bạn đặt box-sizing: border-box; trên một phần tử, phần đệm và đường viền được bao gồm trong chiều rộng và chiều cao

Ví dụ:

Kể từ kết quả của việc sử dụng box-sizing: border-box; tốt hơn rất nhiều, nhiều nhà phát triển muốn tất cả các phần tử trên trang của họ hoạt động theo cách này

Đoạn mã dưới đây đảm bảo rằng tất cả các phần tử đều được định kích thước theo cách trực quan hơn. Nhiều trình duyệt đã sử dụng box-sizing: border-box; cho nhiều phần tử biểu mẫu (nhưng không phải tất cả – đó là lý do tại sao đầu vào và vùng văn bản trông khác nhau với width: 100%;)

Ví dụ: