Padding là thuộc tính CSS được sử dụng để tạo không gian xung quanh nội dung của phần tử và nằm bên trong đường viền (border) của phần tử đó
Với CSS, bạn có toàn quyền kiểm soát Padding, các thuộc tính có thể thiết lập Padding cho mỗi phía của một phần tử (phía trên, phía bên phải, phía dưới, phía bên trái)
1.CSS Padding với các mặt riêng lẻ
Các thuộc tính CSS xác định phần đệm của mỗi bên của phần tử gồm các thuộc tính sau:
- padding-top (phía trên)
- padding-right (phía bên phải)
- padding-bottom (phía dưới)
- padding-left (phía bên trái)
Các thuộc tính của Padding có thể có các giá trị sau:
- length – chỉ định Padding bằng px, pt, cm,…v.v.
- % – chỉ định Padding bằng % chiều rộng của màn hình trình duyệt
- Inherit – chỉ định Padding được kế thừa từ phần tử mẹ
Lưu ý: giá trị âm không được phép
Ví dụ:
Để rút ngắn câu lệnh, bạn có thể chỉ định các thuộc tính Padding bằng một thuộc tính duy nhất
Thuộc tính padding là viết tắt của các thuộc tính:
- padding-top (phía trên)
- padding-right (phía bên phải)
- padding-bottom (phía dưới)
- padding-left (phía bên trái)
Ví dụ:
2.Padding và chiều rộng của phần tử
Thuộc tính CSS width chỉ định chiều rộng của vùng nội dung của phần tử. Vùng nội dung là phần bên trong Padding, đường viền(border) và Margins của một phần tử Vì vậy, nếu một phần tử có chiều rộng được chỉ định, phần đệm được thêm vào phần tử đó sẽ được thêm vào tổng chiều rộng của phần tử. Đây thường là một kết quả không mong muốn
Ví dụ:
Để giữ chiều rộng ở 400px, bất kể giá trị Padding, bạn có thể sử dụng thuộc tính box-sizing. Điều này làm cho phần tử duy trì chiều rộng thực của nó; nếu bạn tăng Padding, không gian nội dung có sẵn sẽ giảm
Ví dụ:
