Thuộc tính CSS Box Sizing

Giới thiệu

Thuộc tính box-sizing kiểm soát cách tính toán width và height của phần tử. Mặc định (CSS2) dùng content-box: width/height chỉ áp dụng cho content area, padding và border được cộng thêm ra ngoài.

Hai mô hình Box Model

Ví dụ so sánh

<!DOCTYPE html>
<html>
<head>
  <style>
    .box {
      width: 300px;
      height: 100px;
      border: 1px solid #333;
      margin-bottom: 20px;
    }
    
    .content-box {
      box-sizing: content-box;  /* Mặc định */
      padding: 50px;
      border-color: blue;
    }
    
    .border-box {
      box-sizing: border-box;   /* Khuyến nghị */
      padding: 50px;
      border-color: red;
    }
  </style>
</head>
<body>
  <div class="box content-box">
    content-box: width=300px, padding=50px → total width = 402px
  </div>
  <div class="box border-box">
    border-box: width=300px, padding=50px → total width = 300px
  </div>
</body>
</html>

Visual so sánh

content-box (mặc định):
┌─────────────────────────────────────┐ ← width: 300px (chỉ content)
│  ┌─────────────────────────────┐   │
│  │   padding: 50px             │   │
│  │   ┌─────────────────────┐   │   │
│  │   │   CONTENT (300px)   │   │   │
│  │   └─────────────────────┘   │   │
│  │   padding: 50px             │   │
│  └─────────────────────────────┘   │
│  border: 1px                      │
└─────────────────────────────────────┘
Total rendered width = 300 + 50×2 + 1×2 = 402px

border-box (khuyến nghị):
┌─────────────────────────────────────┐ ← width: 300px (content + padding + border)
│  border: 1px                        │
│  ┌─────────────────────────────┐   │
│  │   padding: 50px             │   │
│  │   ┌─────────────────────┐   │   │
│  │   │   CONTENT (198px)   │   │   │
│  │   └─────────────────────┘   │   │
│  │   padding: 50px             │   │
│  └─────────────────────────────┘   │
└─────────────────────────────────────┘
Total rendered width = 300px (giữ nguyên)

Best Practice: Global Border-Box Reset

/* CSS Reset hiện đại - áp dụng cho tất cả element */
*, *::before, *::after {
  box-sizing: border-box;
}

/* Hoặc chỉ cho layout elements */
.layout, .component, .container {
  box-sizing: border-box;
}

Lợi ích của border-box

• Dễ dàng đặt width 100% + padding mà không lo tràn container
• Layout dự đoán được, ít bug hơn
• Responsive design dễ dàng hơn (width % + padding cố định)
• Framework lớn (Bootstrap, Tailwind, Foundation) đều dùng border-box mặc định

Lưu ý

• margin luôn nằm ngoài width/height trong cả 2 mô hình
• box-sizing không kế thừa — phải đặt rõ ràng hoặc dùng universal selector
• Flexbox/Grid item mặc định có min-width: auto — có thể gây overflow trong border-box, fix bằng min-width: 0