Giới thiệu mô hình khung CSS

Mô hình khung CSS (Box Model) quy định cách xử lý khung phần tử đối với nội dung phần tử.padding、border và margin cách.

Giới thiệu mô hình khung CSS

Mô hình khung CSS

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 padding. Padding thể hiện bối cảnh của phần tử. Cạnh của padding là border. Bên ngoài border là margin, margin mặc định là trong suốt, vì vậy 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à padding, border.

padding, border và margin là tùy chọn, giá trị mặc định là 0. Tuy nhiên, nhiều phần tử sẽ được thiết lập margin và padding bởi bảng phong cách người dùng. Có thể thay thế các phong cách này bằng cách thiết lập margin và padding của phần tử thành 0. Điều này có thể được thực hiện riêng lẻ hoặc sử dụng chọn器 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 chỉ là độ rộng và độ cao của khu vực nội dung. Việc tăng padding, border và margin 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 phần tử.

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

Mô hình khung CSS minh họa 
#box {
  width: 70px;
  margin: 10px;
  padding: 5px;
}

Lưu ý:padding, border và margin 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 biệt.

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

Khả năng tương thích trình duyệt

Khi đã thiết lập DTD hợp lý cho trang, hầu hết các trình duyệt sẽ hiển thị nội dung theo hình ảnh trên. Tuy nhiên, trình duyệt IE 5 và 6 lại hiển thị không đúng. Theo quy định của W3C, không gian chiếm bởi nội dung phần tử được thiết lập bởi thuộc tính width, trong khi giá trị padding và border xung quanh nội dung được tính riêng biệt. Tuy nhiên, IE5.X và 6 sử dụng mô hình phi tiêu chuẩn của riêng mình trong chế độ怪异模式. Thuộc tính width của các trình duyệt này không phải là độ rộng của nội dung, mà là tổng độ rộng của nội dung, padding và border.

Mặc dù có phương pháp giải quyết vấn đề này. Nhưng giải pháp tốt nhất hiện nay là tránh vấn đề này. Cụ thể, không thêm khoảng cách trong có độ rộng xác định cho phần tử, mà thử thêm khoảng cách trong hoặc khoảng cách ngoài cho phần tử cha và phần tử con.

Dịch thuật thuật ngữ

  • element: phần tử.
  • padding: khoảng cách trong, cũng có tài liệu dịch thành chất liệu lấp đầy.
  • border: biên giới.
  • margin: khoảng cách ngoài, cũng có tài liệu dịch thành khoảng trống hoặc khoảng trống biên.

Tại codew3c, chúng tôi gọi padding và margin một cách thống nhất là khoảng cách trong và khoảng cách ngoài. Khoảng trống trong biên giới là khoảng cách trong, khoảng trống ngoài biên giới là khoảng cách ngoài, dễ nhớ phải không:)