Thư viện thuật ngữ / UI/UX

Padding là gì?

Còn gọi: khoảng đệm bên trong

Padding là khoảng trống bên trong một phần tử, giữa viền của nó và nội dung bên trong, ví dụ khoảng cách từ mép nút tới chữ trên nút.

Padding (khoảng đệm bên trong)

Hiểu kỹ hơn

Padding quyết định một khối trông thoáng hay chật và ảnh hưởng tới vùng bấm: nút có padding đủ lớn sẽ dễ chạm hơn dù chữ nhỏ. Trong Figma, padding là thuộc tính của auto layout, có thể đặt chung, theo ngang dọc hoặc riêng từng cạnh. Ví dụ nút thường có padding dọc 12 và ngang 24, card có padding 16 hoặc 24. Giá trị nên lấy từ hệ thống khoảng cách theo bội số 4 hoặc 8. Một quy tắc hữu ích: padding bên trong một khối nên nhỏ hơn hoặc bằng khoảng cách giữa khối đó với các khối khác, để mắt nhóm nội dung đúng. Trong CSS, padding nằm trong viền, margin nằm ngoài viền. Ví dụ: tăng padding ngang của nút từ 12 lên 24 làm nút trông chắc chắn và cân đối hơn mà không phải đổi cỡ chữ. Lỗi thường gặp là padding trên dưới không cân với chiều cao dòng của font, làm chữ trông lệch lên hoặc xuống trong nút.