Mỗi phần tử trong tài liệu HTML được CSS coi như một hộp chữ nhật. Đây là lược đồ bố cục mặc định và có thể tùy chỉnh theo yêu cầu. Vị trí của các phần tử, nội dung của chúng và các phần tử xung quanh được thực hiện theo mô hình hộp của CSS.
Để bắt đầu, hãy xem bố cục của mô hình hộp như hình sau.
Nguồn: w3.org
Nội dung (Content)
Bao gồm dữ liệu thực tế dưới dạng văn bản, hình ảnh hoặc phương tiện khác. Các thuộc tính width và height sửa đổi kích thước của hộp này.
Đệm (Padding)
Khoảng cách giữa rìa ngoài của nội dung và đường viền của nó gọi là padding. Hộp này có thể thay đổi kích thước bằng thuộc tính padding. Các thuộc tính đặc thù cạnh như padding-left, padding-bottom giúp đạt được khoảng cách tùy chỉnh.
Đường viền (Border)
Khoảng cách giữa rìa ngoài của padding và rìa trong của margin định nghĩa đường viền của một phần tử. Mặc định độ rộng được đặt là 0. Thuộc tính border dùng để định nghĩa đường viền của phần tử. Các cạnh riêng lẻ cũng có thể được tạo kiểu.
Lề (Margin)
Khoảng cách giữa hộp của một phần tử và hộp của các phần tử xung quanh được định nghĩa là margin. Điều này tương tự như lề trang giấy là khoảng cách giữa rìa trang và nội dung của nó. Nó trong suốt, mô phỏng các thuộc tính của padding, ngoại trừ việc nó dọn dẹp 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 định nghĩa để có lề tùy chỉnh.
Ví dụ
Xét ví dụ sau:
<!DOCTYPE html> <html> <head> <style> div { margin: 25px; padding: 35px; width: 200px; background-color: lightseagreen; border: 20px dashed indianred; } </style> </head> <body> <div> Nội dung hộp demo<br/> </div> </body> </html>
Kết quả
Đoạn mã trên tạo ra kết quả sau:
Ở đây, chúng ta đã định nghĩa kích thước của phần tử <div> trong CSS. Tổng chiều rộng của phần tử này là 360px, được tính như sau:
width + (left+right)padding + (left+right)border + (left+right)margin = 200 + (35+35) + (20+20) + (25+25) px = 360px
Mặc dù có vẻ như margin và padding chỉ thêm khoảng trống và cộng vào tổng chiều rộng của phần tử, nhưng chúng có nhiều ứng dụng trong việc làm trang web phản hồi. Mô hình hộp giúp định vị các phần tử tốt hơn.
Ví dụ khác
<!DOCTYPE html> <html> <head> <style> div { margin: auto; padding: 35px; width: 80px; box-shadow: inset 0 0 22px indianred; border-radius: 50%; } div > div { padding: 0 0px 100px 0px; border-radius: 3%; box-shadow: inset 0 0 22px seagreen; } </style> </head> <body> <div> <div></div> </div> </body> </html>
Kết quả
Đoạn mã trên cho kết quả sau:
Ví dụ khác
<!DOCTYPE html> <html> <head> <style> #demo { width: 350px; display: flex; float: left; border: 6px solid black; border-radius: 6%; } .d1 { margin-left: 20px; width: 150px; height: 80px; box-shadow: 0 0 0 4px mediumslateblue; box-sizing: border-box; border-radius: 36%; } .d2 { width: 150px; height: 80px; padding: 30px; box-shadow: 0 0 0 4px darkred; box-sizing: border-box; border-radius: 36%; } </style> </head> <body> <div id="demo"> <div class="d1"></div> <div class="d2"></div> </div> </body> </html>
Kết quả
Đoạn mã trên cho kết quả sau:
