So sánh CSS2 sizing vs CSS3 box-sizing

Giới thiệu

Bài viết so sánh trực quan mô hình box model cũ (CSS2, mặc định content-box) và mới (CSS3, border-box) qua ví dụ code song song.

CSS2: content-box (mặc định)

<!DOCTYPE html>
<html>
<head>
  <style>
    .div1 {
      width: 200px; height: 100px;
      border: 1px solid green;
      /* content-box mặc định */
    }
    .div2 {
      width: 200px; height: 100px;
      padding: 50px;
      border: 1px solid pink;
      /* content-box mặc định */
    }
  </style>
</head>
<body>
  <div class="div1">TutorialsPoint.com (không padding)</div><br>
  <div class="div2">TutorialsPoint.com (có padding 50px)</div>
</body>
</html>

Kết quả:

.div1: Rendered width = 200 + 1×2 = 202px
.div2: Rendered width = 200 + 50×2 + 1×2 = 302px (lớn hơn div1 100px!)

CSS3: border-box

<!DOCTYPE html>
<html>
<head>
  <style>
    .div1 {
      width: 300px; height: 100px;
      border: 1px solid blue;
      box-sizing: border-box;
    }
    .div2 {
      width: 300px; height: 100px;
      padding: 50px;
      border: 1px solid red;
      box-sizing: border-box;
    }
  </style>
</head>
<body>
  <div class="div1">TutorialsPoint.com</div><br>
  <div class="div2">TutorialsPoint.com</div>
</body>
</html>

Kết quả:

.div1: Rendered width = 300px (content ~298px)
.div2: Rendered width = 300px (content ~198px, padding 50px hai bên)
→ Cả hai cùng rendered width = 300px — layout nhất quán!

Bảng so sánh tóm tắt

Đặc điểm	CSS2 (content-box)	CSS3 (border-box)
Width khai báo =	Content width	Content + Padding + Border
Thêm padding →	Element nở ra (break layout)	Content co lại (layout ổn định)
Responsive % width + padding	Khó kiểm soát	Dễ dàng, dự đoán được
Nested components	Dễ bị overflow	An toàn
Hỗ trợ trình duyệt	Tất cả (mặc định)	IE8+ (cần prefix cũ)

Kết luận

Luôn dùng box-sizing: border-box toàn cục (universal selector *) trong mọi project hiện đại. Đây là chuẩn de facto của tất cả CSS framework lớn.

/***** CSS Reset bắt buộc *****/
*, *::before, *::after {
  box-sizing: border-box;
}

/* Sau đó mới viết CSS component */
.card { width: 100%; padding: 1.5rem; } /* Luôn vừa container */