Bài 10: Mô hình hộp (Box Model) trong CSS

Mô hình hộp trong CSS

Tất cả các phần tử HTML có thể được coi là các hộp (box). Trong CSS, thuật ngữ “mô hình hộp” (hay box model) được sử dụng khi nói về thiết kế bố cục website (layout).

Mô hình hộp trong CSS về cơ bản là một hình hộp bao quanh phần tử HTML, bao gồm: lề (margin), viền (border), phần đệm (padding) và nội dung (content). Hình ảnh dưới đây minh họa mô hình hộp:

Giải thích:

• Content – Nội dung của hộp, nơi văn bản và hình ảnh hiển thị
• Padding – Phần đệm, xác định khoảng không gian giữa nội dung hiển thị của một phần tử với đường viền của nó
• Border – Đường viền bao quanh phần đệm và nội dung
• Margin – khoảng cách từ phần tử được chọn ra phía bên ngoài của thành phần đó.

Mô hình hộp cho phép chúng ta thêm 1 đường viền bao xung quanh các phần tử và xác định không gian giữa các phần tử.

div {
  background-color: lightgrey;
  width: 300px;
  border: 15px solid green;
  padding: 50px;
  margin: 20px;
}

Chiều rộng và chiều cao của một phần tử

Để thiết lập chính xác chiều rộng và chiều cao của một phần tử trong tất cả các trình duyệt, bạn cần biết mô hình hộp hoạt động như thế nào.

div {
  width: 320px;
  padding: 10px;
  border: 5px solid gray;
  margin: 0;
}