Trình duyệt dùng CSS box model để xác định hiển thị element trên web page. Box model biểu diễn kích thước element và border, padding, margin của nó. Bạn có thể style từng phần riêng lẻ.
Mọi element đều được bao quanh bởi một box. Hiểu cách các box hoạt động là phần thiết yếu để positioning item theo ý muốn trên web page.
CSS box model xác định cách box hiển thị và positioned trên web page. Model này đề cập đến 4 thành phần – content, padding, border, margin – cấu thành một box trong CSS. Tutorial này thảo luận cơ bản của CSS box model và các phần chính.
CSS Box Model
CSS box model là cấu trúc áp dụng cho tất cả box trong CSS. Model này hướng dẫn trình duyệt cách các phần của box tạo thành element hiển thị trên web page. Box model biểu diễn content, padding, border, margin của một box.
Xem từng element của box model:
- Content: Nội dung box – nơi text, form, hình ảnh, element web khác hiển thị.
- Padding: Khoảng cách giữa content và border của box. Padding là transparent.
- Border: Viền quanh content, hoặc quanh padding nếu padding được chỉ định.
- Margin: Khoảng cách giữa outer edge của border và các element khác trên trang. Margin cũng transparent.
Thảo luận chi tiết từng component và cách dùng.
Vùng Content (Content Area)
Content area ở trung tâm box model. Nơi text, hình ảnh, element khác xuất hiện. Dùng height và width CSS để xác định kích thước content area.
Mặc định, kích thước content area = kích thước element bên trong. Nếu có một dòng text, box sẽ dài và cao bằng dòng text đó.
Giả sử muốn box 200px cao x 200px rộng:
<html>
<p>This is a box.</p>
</html>
<style>
p { height: 200px; width: 200px; }
</style>
Bấm nút Run trong code editor để xem output HTML/CSS.
Dùng thẻ HTML <p> tạo đoạn text. Mọi element web design đều trong box, nên box model áp dụng cho <p>. CSS rule set height/width cho tất cả <p> = 200px.
Đọc thêm beginner's guide to CSS height and width.
Vùng Padding (Padding Area)
Padding area mở rộng content area. Tạo gap giữa content và border. Thường dùng tạo banner, announcement element.
Để apply padding: dùng CSS padding property. Ví dụ padding 25px (code dùng 20px):
<html>
<p>This is a box.</p>
</html>
<style>
p { height: 200px; width: 200px; padding: 20px; }
</style>
Bấm Run để xem output.
Chỉ định padding: 20px → gap 20px giữa content area và border. Giờ có gap giữa box và edge trang.
Vùng Border (Border Area)
Border area là nơi border xuất hiện. Border là outline có màu bên ngoài padding. Có thể dùng bất kỳ màu nào. Có sẵn nhiều design border built-in.
Ví dụ border 5px light blue solid:
<html>
<p>This is a box.</p>
</html>
<style>
p { height: 200px; width: 200px; padding: 20px; border: 5px solid lightblue; }
</style>
Bấm Run để xem output.
Dùng border property: 5px wide, light blue, style solid (đường liền). Border tách biệt content nhờ padding 20px.
Vùng Margin (Margin Area)
Margin area là layer outermost của box model. Tạo empty gap tách element khỏi element khác trên trang.
Ví dụ tạo khoảng cách 10px giữa 2 box:
<html>
<p>This is a box.</p>
<p>This is another box.</p>
</html>
<style>
p { height: 200px; width: 200px; padding: 20px; border: 5px solid lightblue; margin: 10px; }
</style>
Bấm Run để xem output.
HTML có 2 box. CSS apply margin: 10px. Kết quả: gap 10px giữa 2 box – do margin tạo gap giữa border của box này và element khác.
Đọc thêm tutorial CSS margin.
Tính Toán Width Và Height
Lỗi thường gặp của beginner: cho rằng height/width element bao gồm padding, margin, border. Sai.
height và width chỉ set kích thước content area. Không tính các phần khác.
Muốn biết total space box chiếm dụng → tính toán. Giá trị từ ví dụ margin area:
- Height: 200px
- Width: 200px
- Padding: 20px
- Margin: 10px
- Border: 5px
Tính width:
- 200px (width)
- + 40px (left + right padding)
- + 10px (left + right border)
- + 20px (left + right margin)
= 270px tổng chiều rộng.
Tính height: dùng height + top/bottom padding, border, margin.
Kết Luận
CSS box model là cấu trúc render element trên web page. Mọi HTML element là hộp chữ nhật. Box model định nghĩa content, padding, border, margin hiển thị như thế nào.
Muốn học thêm thiết kế web với CSS? Xem How to Learn CSS guide – list top learning resources.