Thuộc tính padding trong CSS được sử dụng để tạo khoảng trống giữa nội dung hiển thị của một phần tử với đường viền của nó. Tham khảo tiếp bài học CSS dưới đây của Taimienphi.vn để tìm hiểu các thuộc tính padding trong CSS.
Thuộc tính padding trong CSS
1. Các thuộc tính padding trong CSS
CSS bao gồm các thuộc tính để chỉ định padding cho từng phần không gian của phần tử:
- Thuộc tính padding-top.
- Thuộc tính padding-right.
- Thuộc tính padding-bottom.
- Thuộc tính padding-left.
Tất cả các thuộc tính padding có thể bao gồm các giá trị dưới đây:
- length: chỉ định giá trị padding dưới dạng đơn vị px, pt, cm, ... .
- %: chỉ định giá trị padding dưới dạng % chiều rộng của phần tử chứa.
- inherit: chỉ định giá trị padding được kế thừa từ phần tử cha.
Lưu ý: Các thuộc tính padding không nhận giá trị âm.
Ví dụ:
Kết quả đầu ra có dạng như dưới đây:
1.1 Thuộc tính padding rút gọn
Để rút gọn mã, chúng ta có thể chỉ định tất cả các thuộc tính padding trong một khai báo.
Sử dụng thuộc tính padding để khai báo tất cả các thuộc tính dưới đây trong một khai báo:
- Thuộc tính padding-top.
- Thuộc tính padding-right.
- Thuộc tính padding-bottom.
- Thuộc tính padding-left.
Trong đó:
- Nếu thuộc tính padding có 4 giá trị:
padding: 25px 50px 75px 100px;
Padding bên trên là 25px
Padding bên phải là 50px
Padding bên dưới là 75px
Padding bên trái là 100px
Ví dụ 1:
Kết quả đầu ra có dạng như dưới đây:
- Nếu thuộc tính padding có 3 giá trị:
padding: 25px 50px 75px;
Padding bên trên là 25px
Padding bên phải và trái là 50px
Padding bên dưới là 75px
Ví dụ 2:
Kết quả đầu ra có dạng như dưới đây:
- Nếu thuộc tính padding có 2 giá trị:
padding: 25px 50px;
Padding bên trên và dưới là 25px
Padding bên phải và trái là 50px
Ví dụ 3:
Kết quả đầu ra có dạng như dưới đây:
- Nếu thuộc tính padding có 1 giá trị:
padding: 25px;
Tất cả các padding là 25px
Ví dụ 4:
Kết quả đầu ra có dạng như dưới đây:
1.2 Thuộc tính width
Thuộc tính width trong CSS xác định chiều rộng 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 và lề của phần tử (gọi là Box Model - định dạng khung, hộp bao quanh một phần tử).
Vì vậy nếu chiều rộng phần tử đã được chỉ định, khi chúng ta thêm padding vào phần tử đó, nó sẽ được tính vào tổng chiều rộng của phần tử.
Ví dụ 1:
Kết quả đầu ra có dạng như dưới đây:
Trong ví dụ này phần tử div có chiều rộng được chỉ định là 30px. Tuy nhiên thực tế chiều rộng của phần tử div là 350px (300px + 25px padding bên trái + 25px padding bên phải).
Để giữ nguyên chiều rộng phần tử div là 300px ngay cả khi thêm padding, chúng ta sử dụng thuộc tính box-sizing.
Ví dụ 2:
Kết quả đầu ra có dạng như dưới đây:
1.3 Thuộc tính padding trong CSS
Dưới đây là bảng danh sách tất cả các thuộc tính padding trong CSS:
Bài học trên đây Taimienphi.vn vừa giới thiệu cho bạn các thuộc tính padding trong CSS. Ngoài ra bạn đọc có thể tham khảo thêm một số bài học CSS khác đã có trên Taimienphi.vn để tìm hiểu thêm thuộc tính margin trong CSS là gì nhé.