Thuộc tính padding trong CSS

1) Nhắc lại “các phần tử của một phần tử”

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

• margin (khoảng cách 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 (khu vực đệm giữa đường viền của phần tử và 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.

Bạn đang xem: Thuộc tính padding trong CSS

2) Thuộc tính padding trong CSS

– Thuộc tính padding được sử dụng để xác định khoảng cách “khu vực đệm” của phần tử HTML.

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

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

padding: length|percent|initial|inherit;

Xem thêm : Facebook API là gì? Tại sao giới kinh doanh Online tại Việt Nam lại đang náo loạn vì platform này?

– Trong đó, giá trị của thuộc tính padding có thể được xác định bằng một trong bốn loại:

length – Xác định khoảng cách khu vực đệm của phần tử bằng một giá trị cụ thể (giá trị này có thể được xác định bằng đơn vị px, em, cm)

percent – Xác định khoảng cách khu vực đệm của phần tử dựa trên tỷ lệ phần trăm chiều rộng phần nội dung của phần tử chứa nó.

– Ví dụ: Ta có phần tử A chứa phần tử B, chiều rộng phần nội dung của phần tử A là 200px.

• Nếu thiết lập thuộc tính padding cho phần tử B với giá trị 50%, thì khoảng cách khu vực đệm của phần tử B sẽ là 100px.
• Nếu thiết lập thuộc tính padding cho phần tử B với giá trị 20%, thì khoảng cách khu vực đệm của phần tử B sẽ là 40px.

initial – Sử dụng giá trị mặc định của thuộc tính padding.

inherit – Kế thừa giá trị thuộc tính padding từ phần tử cha của nó.

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

Xem thêm :

– Khi sử dụng thuộc tính padding với cú pháp ở phần hướng dẫn phía trên, mặc định tất cả các vị trí của phần tử sẽ có cùng một giá trị khu vực đệm.

– Tuy nhiên, nếu muốn các vị trí khác nhau của phần tử có giá trị khu vực đệm riêng biệt (giống như phần tử có đường viền màu xanh bên dưới), ta phải làm như thế nào !?

– Để xác định khoảng cách khu vực đệm ở từng vị trí, ta có một số cú pháp như sau:

4.1) Cú pháp 1

padding: value1 value2 value3 value4;

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

4.2) Cú pháp 2

padding: value1 value2 value3;

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

4.3) Cú pháp 3

padding: value1 value2;

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

Nguồn: https://stamboom-boden.com
Danh mục: Là Gì