Mô hình khung CSS

Mô hình khung CSS

Mọi yếu tố HTML đều có thể coi là hộp. Trong CSS, khi nói đến thiết kế và bố cục, sẽ sử dụng thuật ngữ “hộp mô hình” hoặc “mô hình khung”.

Mô hình khung CSS thực chất là một khung bao quanh mỗi phần tử HTML. Nó bao gồm: lề ngoài, viền, lề trong và nội dung thực tế. Hình dưới đây hiển thị mô hình khung:

Mô hình khung CSS

Giải thích các phần khác nhau:

  • Nội dung - Nội dung của khung, nơi hiển thị văn bản và hình ảnh.
  • Lề trong - Xóa khu vực xung quanh nội dung. Lề trong là trong suốt.
  • Viền - Viền bao quanh lề trong và nội dung.
  • Lề ngoài - Xóa khu vực bên ngoài ranh giới. Lề ngoài là trong suốt.

Mô hình khung cho phép chúng ta thêm viền xung quanh phần tử và định nghĩa khoảng cách giữa các phần tử.

Phần trong cùng nhất của khung phần tử là nội dung thực tế, được bao bọc trực tiếp bởi lề trong. Lề trong tạo ra bối cảnh của phần tử. Lề viền của lề trong là viền. Ngoài viền là lề ngoài, mặc định là trong suốt, vì vậy nó sẽ không che khuất bất kỳ phần tử nào sau nó.

Lưu ý：Bối cảnh được áp dụng cho khu vực được tạo bởi nội dung và lề trong, viền.

Lề trong, viền và lề ngoài là tùy chọn, giá trị mặc định là zero. Tuy nhiên, nhiều phần tử sẽ được thiết lập lề ngoài và lề trong bởi biểu mẫu người dùng代理. Bạn có thể thay thế các biểu mẫu này bằng cách thiết lập margin và padding của phần tử bằng zero. Điều này có thể được thực hiện riêng lẻ hoặc sử dụng bộ lọc phổ quát để thiết lập cho tất cả các phần tử:

* {
  margin: 0;
  padding: 0;
}

Trong CSS, width và height指的是 khu vực nội dung của phần tử. Việc tăng lề trong, viền và lề ngoài sẽ không ảnh hưởng đến kích thước khu vực nội dung, nhưng sẽ tăng kích thước khung tổng thể của phần tử.

Giả sử mỗi cạnh của khung có 10px lề ngoài và 5px lề trong. Nếu bạn muốn khung phần tử này đạt 100px, bạn cần thiết lập chiều rộng của nội dung là 70px, xem hình dưới đây:

Mô hình khung CSS ví dụ 
#box {
  width: 70px;
  margin: 10px;
  padding: 5px;
}

Lưu ý：Lề trong, viền và lề ngoài có thể được áp dụng cho tất cả các cạnh của một phần tử hoặc chỉ áp dụng cho một cạnh riêng lẻ.

Lưu ý：Lề ngoài có thể là giá trị âm và trong nhiều trường hợp, bạn cần sử dụng lề ngoài âm.

Mẫu

Hiển thị mô hình khung:

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

Thử ngay

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

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

Lưu ý quan trọng：Khi sử dụng CSS để thiết lập thuộc tính width và height của phần tử, chỉ cần thiết lập chiều rộng và chiều cao của khu vực nội dung. Để tính toán kích thước đầy đủ của phần tử, bạn还需要 cộng thêm lề trong, viền và lề ngoài.

Mẫu

<div> Chiều rộng tổng của phần tử sẽ là 350px：

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

Thử ngay

Tính toán như sau:

320px (chiều rộng)
+ 20px (khoảng trống nội bộ trái + phải)
+ 10px (viền trái + phải)
+ 0px (khoảng trống ngoại bộ trái + phải)
= 350px

Chiều rộng tổng của phần tử nên được tính như sau:

Chiều rộng tổng của phần tử = Chiều rộng + Khoảng trống nội bộ trái + Khoảng trống nội bộ phải + Viền trái + Viền phải + Khoảng trống ngoại bộ trái + Khoảng trống ngoại bộ phải

Chiều cao tổng của phần tử nên được tính như sau:

Chiều cao tổng của phần tử = Chiều cao + Khoảng trống nội bộ trên + Khoảng trống nội bộ dưới + Viền trên + Viền dưới + Khoảng trống ngoại bộ trên + Khoảng trống ngoại bộ dưới