HTML/CSS | Thuộc tính box-sizing

Học HTML, CSS từ Zero Tới Hero

Thuộc tính box-sizing trong CSS được sử dụng để xác định cách tính tổng kích thước của một phần tử HTML, bao gồm chiều rộng và chiều cao. Nó quyết định liệu padding và border của một phần tử có được bao gồm trong kích thước tổng thể của phần tử hay không.

Các giá trị của thuộc tính box-sizing

1. content-box (mặc định): Khi sử dụng giá trị này, chỉ có nội dung của phần tử được tính vào chiều rộng và chiều cao. Padding và border sẽ được thêm vào ngoài kích thước đã định. Ví dụ, nếu bạn đặt chiều rộng của một phần tử là 100px và padding là 10px, chiều rộng tổng cộng của phần tử sẽ là 120px (100px + 10px + 10px).

   .example {
       box-sizing: content-box;
       width: 100px;
       padding: 10px;
       border: 5px solid #000;
   }
   

2. border-box: Khi sử dụng giá trị này, padding và border được tính vào bên trong kích thước đã định. Điều này có nghĩa là chiều rộng và chiều cao tổng cộng của phần tử sẽ không thay đổi dù có thêm padding hoặc border. Ví dụ, nếu bạn đặt chiều rộng của một phần tử là 100px và padding là 10px, chiều rộng tổng cộng của phần tử vẫn sẽ là 100px.

   .example {
       box-sizing: border-box;
       width: 100px;
       padding: 10px;
       border: 5px solid #000;
   }
   

Tại sao sử dụng box-sizing: border-box?

Sử dụng box-sizing: border-box thường giúp việc quản lý kích thước phần tử dễ dàng hơn, đặc biệt khi bạn muốn đảm bảo các phần tử có cùng kích thước bất kể padding và border. Điều này cũng giúp tránh việc tính toán lại kích thước tổng cộng của phần tử khi thêm padding hoặc border.

Ví dụ sử dụng toàn cục

Để đảm bảo tất cả các phần tử trên trang web sử dụng box-sizing: border-box, bạn có thể đặt thuộc tính này trong CSS toàn cục:

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

Cách này đảm bảo rằng tất cả các phần tử và các phần tử pseudo (như ::before và ::after) sẽ tuân theo quy tắc border-box, giúp bạn dễ dàng quản lý và kiểm soát bố cục trang web một cách nhất quán.