Mọi phần tử trong tài liệu HTML được trình duyệt hiển thị dưới dạng hình hộp chữ nhật. Chiều rộng, chiều cao, phần đệm và lề xác định không gian được phân bổ xung quanh phần tử. Sơ đồ sau minh họa khái niệm mô hình hộp -
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 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ụ
<!DOCTYPE html>
<html>
<head>
<style>
body * {
outline: solid;
}
#demo {
margin: auto;
width: 50%;
padding: 1em;
border: 1px outset;
display: flex;
box-shadow: inset 0 0 15px mediumvioletred;
box-sizing: border-box;
}
#demo div {
padding: 2em;
box-shadow: inset 0 0 9px orange;
}
</style>
</head>
<body>
<div id="demo">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html> Đầu ra
Điều này cho kết quả sau -
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
body * {
outline: thin dotted;
}
#demo {
margin: auto;
width: 120px;
height: 120px;
padding: 1em;
border: 1px outset;
display: flex;
box-shadow: inset 0 0 15px indianred;
}
#demo div {
width: 40px;
height: 40px;
}
div:nth-child(odd) {
border: inset lightgreen;
border-bottom-right-radius: 100px;
border-bottom-left-radius: 100px;
}
div:nth-child(even) {
border: inset lightblue;
padding: 0.5em;
}
</style>
</head>
<body>
<div id="demo">
<div></div>
<div></div>
<div></div>
</div>
</body>
</html> Đầu ra
Điều này cho kết quả sau -
