Trong CSS, Box Model là một khái niệm quan trọng để xác định cách một phần tử trên trang web được cấu trúc và vị trí. Nó bao gồm các thành phần cơ bản như Content (Nội dung), Padding, Border (Đường viền) và Margin.
Content (Nội dung)
Content là phần chứa nội dung thực tế của phần tử, ví dụ như văn bản, hình ảnh hoặc video.
Để định dạng kích thước nội dung, ta sử dụng thuộc tính "width" và "height".
Padding
Padding là khu vực trống xung quanh nội dung, tạo khoảng cách giữa nội dung và đường viền của phần tử.
Để xác định giá trị padding, ta sử dụng thuộc tính "padding-top", "padding-right", "padding-bottom" và "padding-left".
Border (Đường viền)
Border là đường viền xung quanh phần tử, tạo ra ranh giới rõ ràng giữa nội dung và vùng xung quanh.
Để định dạng đường viền, ta sử dụng thuộc tính "border-width", "border-style" và "border-color".
Margin
Margin là khu vực trống bên ngoài đường viền của phần tử, tạo ra khoảng cách giữa các phần tử khác.
Để xác định giá trị margin, ta sử dụng thuộc tính "margin-top", "margin-right", "margin-bottom" và "margin-left".
Sử dụng Box Model trong CSS, ta có thể tùy chỉnh kích thước và vị trí của một phần tử bằng cách thay đổi giá trị của các thành phần trong Box Model.
Ví dụ:
.box {
width: 200px;
height: 100px;
padding: 20px;
border: 1px solid black;
margin: 10px;
}
Trong ví dụ trên, phần tử có lớp .box có chiều rộng là 200px và chiều cao là 100px. Nó có 20px padding, đường viền đen với độ dày là 1px và 10px margin.
Bằng cách điều chỉnh các giá trị này, bạn có thể tạo ra các phần tử với kích thước và khoảng cách khác nhau trong trang web của bạn. Qua việc sử dụng Box Model, bạn có thể kiểm soát vị trí, kích thước và khoảng cách của các phần tử trong giao diện của mình.