Sự Khác Biệt Giữa Border-Box và Content-Box Trong CSS

Question

Hồng Dương · Accepted Answer

Trong CSS, thuộc tính box-sizing quyết định cách mà kích thước của các phần tử được tính toán. Việc nắm rõ hai giá trị phổ biến nhất là border-box và content-box sẽ giúp bạn quản lý bố cục một cách hiệu quả và tối ưu hóa trải nghiệm người dùng trên trang web của mình.
1. Định Nghĩa
1.1. content-box
content-box là giá trị mặc định của thuộc tính box-sizing. Với giá trị này, kích thước của phần tử được tính bằng chiều rộng và chiều cao của nội dung bên trong. Điều này có nghĩa là padding và border không được tính vào kích thước tổng thể của phần tử.
Công thức tính kích thước:
Width = Content Width
Height = Content Height
1.2. border-box
Ngược lại, khi bạn sử dụng border-box, kích thước của phần tử sẽ bao gồm cả nội dung, padding và border. Điều này đồng nghĩa với việc khi bạn thêm padding hoặc border, chiều rộng và chiều cao tổng thể của phần tử sẽ không thay đổi.
Công thức tính kích thước:
Width = Content Width + Padding + Border
Height = Content Height + Padding + Border
2. Ví Dụ Cụ Thể
2.1. Sử Dụng content-box
.box {
    box-sizing: content-box;
    width: 200px; /* Chiều rộng phần tử */
    padding: 20px; /* Padding */
    border: 5px solid black; /* Border */
}
Trong ví dụ trên, chiều rộng và chiều cao của phần tử .box sẽ được tính như sau:
Chiều rộng nội dung: 200px
Padding: 20px (trên và dưới) => 40px
Border: 5px (trên và dưới) => 10px
Kết quả: Chiều rộng tổng thể sẽ là 200px + 40px + 10px = 250px.
2.2. Sử Dụng border-box
.box {
    box-sizing: border-box;
    width: 200px; /* Chiều rộng phần tử */
    padding: 20px; /* Padding */
    border: 5px solid black; /* Border */
}
Với border-box, chiều rộng và chiều cao của phần tử sẽ được tính như sau:
Chiều rộng tổng thể: 200px (bao gồm cả padding và border)
Kết quả: Chiều rộng của phần tử vẫn là 200px, không bị ảnh hưởng bởi padding và border.
3. Lợi Ích và Ứng Dụng
3.1. Lợi Ích của content-box
Đơn giản hơn trong việc tính toán kích thước khi chỉ cần tập trung vào nội dung.
Dễ dàng hơn để thiết kế các layout đơn giản mà không cần lo lắng về padding và border làm thay đổi kích thước tổng thể.
3.2. Lợi Ích của border-box
Giúp giảm thiểu các vấn đề về layout, đặc biệt khi làm việc với các khối nhiều lớp (nested elements).
Thao tác dễ hơn với các phần tử vì kích thước tổng thể của phần tử không thay đổi khi thêm padding hoặc border, giúp quản lý kích thước chính xác hơn.
4. Kết Luận
Nắm vững sự khác biệt giữa border-box và content-box không chỉ giúp bạn tránh những vấn đề về bố cục mà còn giúp bạn trở thành một lập trình viên CSS hiệu quả hơn. Hãy sử dụng border-box để dễ dàng kiểm soát kích thước phần tử, đặc biệt trong các layout phức tạp.