Lề và đệm có thể gây nhầm lẫn vì theo một số cách, chúng có vẻ giống nhau: khoảng trắng xung quanh một hình ảnh hoặc đối tượng. Đây là những gì bạn là một nhà thiết kế web cần biết về sự khác biệt của chúng.
Đệm
Padding là khoảng trống giữa hình ảnh hoặc nội dung ô và đường viền bên ngoài của nó. Trong hình ảnh bên dưới, phần đệm là vùng màu vàng xung quanh nội dung. Trong trường hợp này, phần đệm đi hoàn toàn xung quanh các nội dung: phía trên, phía dưới, bên phải và bên trái. Bạn có thể chỉ định bao nhiêu phần đệm (theo tỷ lệ phần trăm, pixel, điểm, v.v.) cho mỗi bên và chúng không nhất thiết phải giống nhau. Bằng cách này, bạn có thể định vị nội dung trong một phần tử.
Lề
Ngược lại, lề là khoảng trống bên ngoài đường viền của một phần tử, giữa phần tử và bất cứ thứ gì liền kề với nó. Trong ảnh, lề là vùng trắng bên ngoài toàn bộ đối tượng. Giống như phần đệm, lề đi hoàn toàn xung quanh nội dung trong ví dụ này: ở trên cùng, dưới cùng, bên phải và bên trái. Bạn có thể sử dụng lề để định vị các div và các phần tử khác trên một trang.
Luôn kiểm tra các trang của bạn trên nhiều trình duyệt, hệ điều hành (bao gồm cả thiết bị di động) và kích thước màn hình để đảm bảo chúng hiển thị chính xác như bạn muốn.
