CSS Box Model và `box-sizing: border-box`: Giải pháp tối ưu cho layout

Bài viết này sẽ đi sâu vào CSS Box Model, đặc biệt là thuộc tính box-sizing: border-box, một công cụ mạnh mẽ giúp bạn kiểm soát kích thước và bố cục của các phần tử trên trang web một cách dễ dàng và hiệu quả hơn.

Minh họa tất cả các phần tử trên trang web đều là các khối hình chữ nhật.Minh họa tất cả các phần tử trên trang web đều là các khối hình chữ nhật.

Box Model trong CSS là gì?

Hãy luôn nhớ rằng, mọi phần tử trên trang web đều được trình duyệt hiểu là một hình chữ nhật. Để trình duyệt có thể hiển thị chính xác kích thước và vị trí của các phần tử này, nó dựa vào Box Model để tính toán. Về cơ bản, Box Model là một tập hợp các quy tắc và công thức giúp trình duyệt xác định chiều rộng, chiều cao và các thuộc tính khác của một phần tử.

Các thành phần của Box Model

Mỗi hình chữ nhật đại diện cho một phần tử bao gồm 4 thành phần chính:

  • Content: Vùng chứa nội dung của phần tử (text, hình ảnh, video,…). Kích thước của vùng này được xác định bởi thuộc tính width và height.
  • Padding: Khoảng không gian bao quanh vùng nội dung, tạo khoảng cách giữa nội dung và đường viền.
  • Border: Đường viền bao quanh vùng padding, có thể tùy chỉnh độ rộng, kiểu dáng và màu sắc.
  • Margin: Khoảng không gian bao quanh đường viền, tạo khoảng cách giữa phần tử hiện tại và các phần tử khác.

Bạn có thể dễ dàng kiểm tra các thuộc tính này của các phần tử thông qua DevTools của trình duyệt.

Hình ảnh minh họa Box model được hiển thị trực quan trên dev tools của trình duyệt.Hình ảnh minh họa Box model được hiển thị trực quan trên dev tools của trình duyệt.

Công thức tính kích thước phần tử (mặc định content-box):

  • Chiều rộng = width + padding-left + padding-right + border-left + border-right
  • Chiều cao = height + padding-top + padding-bottom + border-top + border-bottom

Các thuộc tính CSS tương ứng:

  • Chiều rộng/cao của content: width, height
  • Padding: padding, padding-left, padding-right, padding-top, padding-bottom
  • Border: border, border-left, border-right, border-top, border-bottom

Ví dụ:

.element {
  width: 80px;
  height: 100px;
  padding: 30px 20px; /* top right bottom left */
  margin: 30px auto;
  border: 1px solid black;
}

Hình ảnh minh họa các thuộc tính cơ bản của box model.Hình ảnh minh họa các thuộc tính cơ bản của box model.

Lưu ý: Mặc dù margin là một phần của Box Model, nó không ảnh hưởng trực tiếp đến chiều rộng và chiều cao của phần tử. Margin tạo khoảng cách bên ngoài phần tử, đẩy các phần tử khác ra xa.

Vấn đề với Box Model mặc định (content-box)

Với cách tính kích thước mặc định (content-box), việc thay đổi padding hoặc border có thể gây ra nhiều phiền toái:

  • Thay đổi layout: Khi bạn tăng padding hoặc thêm border, tổng kích thước của phần tử sẽ tăng lên, đẩy các phần tử xung quanh và làm thay đổi bố cục trang web. Để khắc phục, bạn phải tính toán và điều chỉnh lại kích thước width và height của content, rất mất thời gian và dễ gây ra sai sót.
  • Phần tử con tràn ra ngoài: Khi phần tử con có tổng kích thước (bao gồm width, padding và border) lớn hơn phần tử cha, nó sẽ bị tràn ra ngoài, gây ra lỗi hiển thị.

Ví dụ, khi bạn thay đổi padding, bố cục tổng thể có thể bị ảnh hưởng:

Hình ảnh minh họa thay đổi padding làm ảnh hưởng đến layout tổng.Hình ảnh minh họa thay đổi padding làm ảnh hưởng đến layout tổng.

Tương tự, việc thay đổi border cũng gây ra vấn đề tương tự.

Một ví dụ khác về lỗi thường gặp là khi phần tử con tràn ra khỏi phần tử cha:

.parent {
  width: 300px;
  height: 300px;
  padding: 20px;
  border: 2px solid greenyellow;
}

.child {
  width: 300px;
  height: 200px;
  padding: 30px;
  color: #ffffff;
  background-color: steelblue;
}

Hình ảnh minh họa lỗi layout thường gặp khi element con tràn ra khỏi element cha.Hình ảnh minh họa lỗi layout thường gặp khi element con tràn ra khỏi element cha.

Giải pháp: box-sizing: border-box

Thuộc tính box-sizing cho phép bạn thay đổi cách tính kích thước của một phần tử. Giá trị border-box sẽ thay đổi cách Box Model hoạt động, giúp đơn giản hóa việc quản lý kích thước và bố cục.

  • content-box (mặc định): width và height chỉ định kích thước của vùng nội dung.
  • border-box: width và height chỉ định kích thước tổng thể của phần tử, bao gồm cả content, padding và border. Vùng nội dung sẽ tự động co giãn để phù hợp với kích thước tổng thể đã chỉ định.

Khi sử dụng box-sizing: border-box, công thức tính kích thước phần tử sẽ thay đổi:

  • Chiều rộng = width (bao gồm content, padding và border)
  • Chiều cao = height (bao gồm content, padding và border)

Hình ảnh minh họa box-sizing: border-box giải quyết các vấn đề liên quan đến layout rất tốt.Hình ảnh minh họa box-sizing: border-box giải quyết các vấn đề liên quan đến layout rất tốt.

Sử dụng box-sizing: border-box cho toàn bộ trang web

Để áp dụng box-sizing: border-box cho tất cả các phần tử trên trang web, bạn có thể sử dụng Universal selector (*):

* {
  box-sizing: border-box;
}

/* Hoặc cẩn thận hơn, bao gồm cả pseudo-elements */
*,
*::before,
*::after {
  box-sizing: border-box;
}

Bạn vẫn có thể dễ dàng ghi đè (override) thuộc tính box-sizing cho các phần tử cụ thể khi cần thiết:

.content-element {
  box-sizing: content-box;
}

Lưu ý

Kích thước của một phần tử có thể bị ảnh hưởng bởi nhiều yếu tố khác như min-width, max-width, min-height, max-height và các thuộc tính của Flexbox hoặc Grid.

Kết luận

box-sizing: border-box là một công cụ vô cùng hữu ích giúp bạn đơn giản hóa việc quản lý kích thước và bố cục của các phần tử trên trang web. Bằng cách sử dụng border-box, bạn có thể dễ dàng thay đổi padding và border mà không lo làm ảnh hưởng đến bố cục tổng thể. Hãy áp dụng box-sizing: border-box cho toàn bộ dự án của bạn để tiết kiệm thời gian và tránh những lỗi không đáng có.