CSS Padding

Cách làm việc với padding trong CSS

CácpaddingThuộc tính CSS thường được sử dụng trong CSS để thêm không gian ở phía bên trong của một phần tử.

Nhớ lại:

  • marginthêm không gian bên ngoài đường viền phần tử
  • paddingthêm không gian bên trong đường viền phần tử

Thuộc tính đệm cụ thể

paddingcó 4 thuộc tính liên quan làm thay đổi vùng đệm của một cạnh cùng một lúc:

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

Cách sử dụng chúng rất đơn giản và không thể nhầm lẫn, ví dụ:

padding-left: 30px;
padding-right: 3em;

Sử dụngpaddingtốc ký

paddinglà cách viết tắt để chỉ định nhiều giá trị đệm cùng một lúc và tùy thuộc vào số lượng giá trị được nhập, nó hoạt động khác nhau.

1 giá trị

Sử dụng một giá trị duy nhất sẽ áp dụng chotất cảcác phần đệm: trên, phải, dưới, trái.

padding: 20px;

2 giá trị

Sử dụng 2 giá trị sẽ áp dụng giá trị đầu tiên chodưới cùng và trên cùng, và thứ hai tớitrái phải.

padding: 20px 10px;

3 giá trị

Việc sử dụng 3 giá trị sẽ áp dụng giá trị đầu tiên chohàng đầu, thứ hai đểtrái phải, thứ ba đếnđáy.

padding: 20px 10px 30px;

4 giá trị

Việc sử dụng 4 giá trị sẽ áp dụng giá trị đầu tiên chohàng đầu, thứ hai đểđúng, thứ ba đếnđáy, thứ tư đếntrái.

padding: 20px 10px 5px 0px;

Vì vậy, đơn đặt hàng làtrên-phải-dưới-trái.

Giá trị được chấp nhận

paddingchấp nhận các giá trị được biểu thị bằng bất kỳ loại đơn vị độ dài nào, các giá trị phổ biến nhất là px, em, rem, nhưngnhiều người khác tồn tại.

Tải xuống miễn phí của tôiSổ tay CSS


Các hướng dẫn css khác: