So Sánh Các Thuộc Tính Box-Sizing Trong CSS

Trong CSS, thuộc tính box-sizing xác định cách tính toán kích thước của một phần tử, bao gồm chiều rộng và chiều cao. Điều này rất quan trọng để quản lý bố cục và tạo ra các giao diện chính xác. Có ba giá trị chính cho thuộc tính box-sizing: content-box, border-box, và inherit. Dưới đây là so sánh chi tiết giữa các giá trị này.

1. content-box

• Mô tả: Đây là giá trị mặc định của thuộc tính box-sizing. Kích thước của phần tử chỉ bao gồm nội dung (content), không tính đến padding và border.
• Cách tính toán:
  • Chiều rộng (width) = Kích thước nội dung.
  • Chiều cao (height) = Kích thước nội dung.
  • Padding và Border sẽ được thêm vào kích thước, làm tăng kích thước thực tế của phần tử.

Ví dụ:

.box {
    box-sizing: content-box;
    width: 200px;
    padding: 20px; /* Padding sẽ được thêm vào */
    border: 5px solid black; /* Border sẽ được thêm vào */
}

• Kích thước thực tế:
  • Chiều rộng = 200px + 20px (padding trái) + 20px (padding phải) + 5px (border trái) + 5px (border phải) = 250px
  • Chiều cao = 100% của nội dung + padding + border.

2. border-box

• Mô tả: Với giá trị này, kích thước của phần tử sẽ bao gồm nội dung, padding và border. Điều này giúp dễ dàng kiểm soát kích thước phần tử mà không lo lắng về việc thêm padding hoặc border sẽ làm tăng kích thước tổng thể.
• Cách tính toán:
  • Chiều rộng (width) = Kích thước nội dung + padding + border.
  • Chiều cao (height) = Kích thước nội dung + padding + border.

Ví dụ:

.box {
    box-sizing: border-box;
    width: 200px;
    padding: 20px; /* Padding sẽ nằm trong 200px */
    border: 5px solid black; /* Border sẽ nằm trong 200px */
}

• Kích thước thực tế:
  • Chiều rộng = 200px (bao gồm padding và border)
  • Chiều cao = 100% của nội dung + padding + border.

3. inherit

• Mô tả: Giá trị này sẽ kế thừa thuộc tính box-sizing từ phần tử cha. Điều này có thể hữu ích khi bạn muốn duy trì tính nhất quán trong một nhóm phần tử.

Ví dụ:

.parent {
    box-sizing: border-box;
}

.child {
    box-sizing: inherit; /* Kế thừa từ .parent */
}

• Trong ví dụ này, phần tử con (.child) sẽ có cùng giá trị box-sizing như phần tử cha (.parent).

So Sánh Ngắn Gọn