Bài 16: Định dạng khung

1. Kiến thức trọng tâm

Trong CSS, mỗi phần tử HTML được coi như một hộp chữ nhật gồm bốn lớp: nội dung (content), phần đệm (padding) là khoảng trống giữa nội dung và viền, viền (border) bao quanh phần tử và lề ngoài (margin) là khoảng cách tới các phần tử xung quanh. Đây gọi là mô hình hộp (box model). Thuộc tính width và height đặt chiều rộng, chiều cao của phần nội dung; padding tạo khoảng trống bên trong, border vẽ viền với độ dày, kiểu và màu sắc, margin tạo khoảng cách bên ngoài. Ví dụ, một hộp thông báo thường có nền màu nhạt, viền mảnh, padding rộng để chữ không dính sát viền và margin để tách khỏi các phần tử khác. Hiểu mô hình hộp giúp căn chỉnh bố cục chính xác, tránh hiện tượng các khối chồng lấn hoặc dính sát nhau. Khi thiết kế, nên đặt box-sizing: border-box để chiều rộng khai báo bao gồm cả padding và viền, giúp tính toán kích thước dễ dàng hơn.

2. Ví dụ minh họa

Yêu cầu: tạo hộp thông báo rộng 300px, nền vàng nhạt, viền cam dày 2px, padding 12px và margin 20px.

Lời giải:

.thong-bao {
  width: 300px;
  background-color: #FFF9C4;
  border: 2px solid orange;
  padding: 12px;
  margin: 20px;
}

Giải thích: width: 300px đặt chiều rộng nội dung; border: 2px solid orange vẽ viền cam liền nét dày 2px; padding: 12px tạo khoảng trống 12px giữa chữ và viền bốn phía; margin: 20px đẩy hộp cách các phần tử xung quanh 20px. Kết quả là hộp thông báo gọn gàng, chữ không dính viền, hộp tách biệt rõ với nội dung khác.

3. Ghi nhớ

• Mô hình hộp gồm: nội dung, padding, border, margin.
• padding là khoảng trống bên trong viền; margin là khoảng cách bên ngoài viền.
• border gồm độ dày, kiểu và màu sắc, ví dụ 2px solid orange.
• box-sizing: border-box giúp chiều rộng khai báo bao gồm cả padding và viền.