Mỗi phần tử trong tài liệu HTML được CSS coi như một hình hộp chữ nhật. Đây là sơ đồ bố cục mặc định và có thể được tùy chỉnh theo yêu cầu của chúng tôi. Việc định vị các phần tử, nội dung của chúng và các yếu tố xung quanh chúng được thực hiện theo mô hình hộp của CSS.
Để bắt đầu, hãy bắt đầu với cách bố trí của mô hình hộp như trong hình ảnh sau đây.
Nguồn:w3.org
Nội dung
Điều này bao gồm dữ liệu thực tế ở dạng văn bản, hình ảnh hoặc nội dung phương tiện khác. Thuộc tính chiều rộng và chiều cao sửa đổi kích thước của hộp này.
Lớp đệm
Khoảng trống giữa mép ngoài của nội dung và đường viền của nó là khoảng đệm. Hộp này có thể được thay đổi kích thước bằng thuộc tính padding. Các thuộc tính dành riêng cho cạnh như padding-left, padding-bottom, v.v. giúp đạt được khoảng cách tùy chỉnh.
Đường viền
Khoảng cách giữa mép ngoài của vùng đệm và mép trong của lề xác định đường viền của một phần tử. Theo mặc định, chiều rộng của nó được đặt thành 0. Thuộc tính border được sử dụng để xác định đường viền của phần tử. Các cạnh riêng lẻ cũng có thể được tạo kiểu.
Tiền ký quỹ
Khoảng trống giữa hộp của một phần tử và hộp của các phần tử xung quanh nó được xác định là lề. Điều này tương tự với lề trang được định nghĩa là khoảng trống giữa mép của một trang và nội dung của nó. Nó có màu trong suốt, mô phỏng các thuộc tính của phần đệm, ngoại trừ việc nó xóa khu vực bên ngoài đường viền của phần tử. Giống như padding, các cạnh riêng lẻ có thể được xác định để có lề tùy chỉnh.
Ví dụ
Hãy xem xét ví dụ sau -
Hộp trình diễn nội dung
Đầu ra
Điều này tạo ra kết quả sau -
Ở đây, chúng tôi đã xác định kích thước của phần tử
width + (left + right) padding + (left + right) border + (left + right) margin =200 + (35 + 35) + (20 + 20) + (25 + 25) px =360pxMặc dù có vẻ như lề và phần đệm chỉ tạo thêm khoảng trống không liên quan và thêm vào tổng chiều rộng của phần tử, nhưng nó đã tìm thấy các ứng dụng khác nhau trong việc làm cho trang web trở nên phản hồi. Mô hình hộp giúp định vị các phần tử theo cách tốt hơn.
Ví dụ
Các ví dụ sau minh họa mô hình hộp CSS -
Đầu ra
Điều này cho kết quả sau
Ví dụ
Đầu ra
Điều này cho kết quả sau -
