Padding la gì

1) Nhắc lại "các thành phần của một phần tử"

- Thông thường, cấu trúc của một phần tử HTML sẽ bao gồm bốn thành phần:

• margin (phần lề nằm giữa đường viền của phần tử với các phần tử xung quanh)
• border (đường viền của phần tử)
• padding (vùng đệm nằm giữa đường viền của phần tử với nội dung của phần tử)
• content (nội dung của phần tử)

- Dưới đây là hình ảnh minh họa về cấu trúc của một phần tử HTML.

2) Thuộc tính padding trong CSS

- Thuộc tính padding dùng để xác định khoảng cách "vùng đệm" của phần tử HTML.

- Xác định khoảng cách vùng đệm của phần tử HTML có đường viền màu xanh.

3) Cách sử dụng thuộc tính padding trong CSS

- Để sử dụng thuộc tính padding, ta dùng cú pháp như sau:

padding: length|percent|initial|inherit;

- Trong đó, ta thấy giá trị của thuộc tính padding có thể được xác định bởi một trong bốn loại:

4) Xác định khoảng cách vùng đệm ở từng vị trí

- Khi chúng ta sử dụng thuộc tính padding với cú pháp ở phần hướng dẫn phía trên thì mặc định khoảng cách vùng đệm ở cả bốn vị trí của phần tử sẽ có chung một giá trị.

- Tuy nhiên, nếu muốn khoảng cách vùng đệm ở mỗi vị trí của phần tử có một giá trị riêng biệt (giống phần tử có đường viền màu xanh bên dưới) thì ta phải làm như thế nào !?

- Để xác định khoảng cách vùng đệm ở từng vị trí thì ta có một số cú pháp như sau:

4.1) Cú pháp 1

padding: value1 value2 value3 value4;

• Vùng đệm phía trên của phần tử sẽ có khoảng cách là value1
• Vùng đệm bên phải của phần tử sẽ có khoảng cách là value2
• Vùng đệm phía dưới của phần tử sẽ có khoảng cách là value3
• Vùng đệm bên trái của phần tử sẽ có khoảng cách là value4

Xem ví dụ

4.2) Cú pháp 2

padding: value1 value2 value3;

• Vùng đệm phía trên của phần tử sẽ có khoảng cách là value1
• Vùng đệm bên trái & bên phải của phần tử sẽ có khoảng cách là value2
• Vùng đệm phía dưới của phần tử sẽ có khoảng cách là value3

Xem ví dụ

4.3) Cú pháp 3

padding: value1 value2;

• Vùng đệm phía trên & phía dưới của phần tử sẽ có khoảng cách là value1
• Vùng đệm bên trái & bên phải của phần tử sẽ có khoảng cách là value2

Xem ví dụ