Khi mới học HTML/CSS, tôi mất thời gian để hiểu sự khác biệt giữa margin và padding trong box model. Bài viết này chia sẻ cách tôi phân biệt hai khái niệm này.
Mô hình Box Model (Hộp) trong CSS
Hãy tưởng tượng box model — các container chứa thành phần website — như một bức tranh đặt trong khung tranh:
- Content (Nội dung): Bức tranh chính — thứ chúng ta muốn đặt trong container.
- Padding (Đệm): Viền carton (matting) bao quanh bức tranh, làm khung tranh lớn hơn. Trong CSS, padding là khoảng cách giữa content và border.
- Border (Viền): Khung tranh giữ content và padding.
- Margin (Lề): Khoảng cách giữa các phần tử liền kề (các khung tranh) trên viewport (bức tường).
Khi nào dùng margin, khi nào dùng padding?
Dùng margin khi muốn điều chỉnh vị trí của phần tử so với các phần tử khác trên trang. Dùng padding khi muốn khoảng cách вокруг content lớn hơn (bên trong border).
Thiết lập Margin và Padding
CSS cung cấp nhiều cách viết gọn (shorthand):
/* 4 giá trị: top right bottom left (theo chiều kim đồng hồ - TRBL) */ margin: 10px 25px 30px 5px; padding: 20px 25px 35px 45px; /* 2 giá trị: top/bottom | left/right */ margin: 20px 30px; padding: 30px 20px; /* 1 giá trị: tất cả các cạnh */ margin: 30px; padding: 30px;
Bạn cũng có thể thiết lập riêng từng cạnh: margin-top, margin-right, margin-bottom, margin-left (tương tự cho padding).
Kết luận
Margin quản lý khoảng cách bên ngoài border, padding quản lý khoảng cách bên trong border. Hãy thực hành với code editor để thành thạo việc thiết lập margin và padding.