HTML/CSS | Box Model là gì?

Học HTML, CSS từ Zero Tới Hero

• Các phần tử luôn là hình chữ nhật
• Các thành phần của Box Model
• Box Model và CSS
• Nhóm 5 thuộc tính trong Box Model
• Kích thước thật của một phần tử

Các phần tử luôn là hình chữ nhật

Trong CSS, thuật ngữ “Box Model” được sử dụng để nói lên mô hình của mọi thẻ HTML khi hiển thị trên giao diện website.

Trình duyệt sẽ luôn coi mỗi một phần tử là một hình chữ nhật. Khi inspect trình duyệt ra bạn sẽ thấy:

Thẻ <h1> được trình duyệt xem là một hình chữ nhật.

Thẻ <p> cũng được trình duyệt xem là một hình chữ nhật.

Hay thậm chí hình tròn cũng được trình duyệt xem là hình chữ nhật.

Có thể bạn sẽ thắc mắc rằng inspect trình duyệt ra thì thấy đó là hình vuông, nhưng hình vuông cũng là một hình chữ nhật đặc biệt.

Chốt lại, các phần tử luôn được trình duyệt xem là một hình chữ nhật.

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

Box Model bao gồm 4 thành phần chính:

• Content: chứa nội dung thực sự của phần tử như văn bản, hình ảnh hoặc video, v.v.
• Padding: là phần không gian được đệm vào xung quanh nội dung, nằm giữa nội dung và đường viền (border).
• Border: là phần đường viền của phần tử, nằm giữa padding và margin.
• Margin: là khoảng cách giữa phần tử hiện tại và các phần tử xung quanh, giúp tạo khoảng cách giữa các phần tử trên trang web.

Để xem Box Model của một phần tử, click chuột phải vào phần tử đó, chọn Inspect/Kiểm tra và đảm bảo Devtools của bạn đang trỏ vào đúng phần tử muốn xem. Tại tab Style, cuộn xuống dưới cùng hoặc chọn luôn vào tab Computed.

Xem thêm hướng dẫn dưới đây:

Box Model và CSS 

Nhóm 5 thuộc tính trong Box Model

Trong CSS, bạn có thể tùy chỉnh các thành phần của Box Model bằng các thuộc tính phù hợp. Có 5 thuộc tính CSS liên quan đến Box Model:

• Width: chiều rộng của phần tử.
• Height: chiều cao của phần tử.
• Padding: khoảng cách giữa nội dung và viền.
• Border: đường viền của phần tử, có thể tùy chỉnh kiểu, màu sắc, v.v.
• Margin: khoảng cách giữa phần tử hiện tại và các phần tử xung quanh.

Kích thước thật của một phần tử

Khi đặt kích thước bằng thuộc tính width và height thì đó chưa phải là kích thước thật của một phần tử.

Theo bạn, class .box sẽ có kích thước là bao nhiêu?

.box {
  width: 200px;
  height: 100px;
  padding: 10px;
  border: 2px solid black;
  margin: 20px;
}

Kích thước thật của một phần tử được tính như sau:

• Chiều rộng = width + (padding trái + padding phải) + (border trái + border phải)
• Chiều cao = height + (padding trên + padding dưới) + (border trên + border dưới)

Áp dụng cho ví dụ trên, kích thước thật của class .box bao gồm:

• Chiều rộng = 200px + (10px + 10px) + (2px + 2px) = 224px
• Chiều cao = 100px + (10px + 10px) + (2px + 2px) = 124px

Vậy class .box có kích thước là: 224x124.

Trong Box Model, margin là thành phần không tham gia làm tăng kích thước phần tử. Vì vậy, khi tính kích thước thật của phần tử sẽ không bao gồm margin.

Tóm tắt

• Trình duyệt luôn xem các phần tử là hình chữ nhật.
• Có 4 thành phần trong Box Model: content, padding, border, margin.
• Có 5 thuộc tính CSS trong Box Model: width, height, padding, border, margin.
• Kích thước được đặt bằng thuộc tính width và height chưa phải là kích thước thật của một phần tử. Kích thước thật của một phần tử luôn bao gồm: width, height, padding và border.
• Margin không tham gia làm tăng kích thước phần tử.