CSS – Padding

Padding được sử dụng để tạo không gian xung quanh nội dung của phần tử, bên trong bất kỳ đường viền được xác định nào.

Phần đệm CSS
Thuộc tính đệm CSS được sử dụng để tạo khoảng trống xung quanh nội dung của phần tử, bên trong bất kỳ đường viền được xác định nào.

Với CSS, bạn có toàn quyền kiểm soát phần đệm. Có các thuộc tính để đặt khoảng đệm cho mỗi cạnh của một phần tử (trên, phải, dưới và trái).

Padding – Individual Sides

CSS có các thuộc tính để chỉ định phần đệm cho mỗi bên của một phần tử:

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

Tất cả các thuộc tính đệm có thể có các giá trị sau:

length – chỉ định phần đệm bằng px, pt, cm, v.v.
% – chỉ định phần đệm theo % chiều rộng của phần tử chứa
inherit – chỉ định rằng phần đệm phải được kế thừa từ phần tử cha

div {
  padding-top: 50px;
  padding-right: 30px;
  padding-bottom: 50px;
  padding-left: 80px;
}

Padding – Thuộc tính viết tắt

Để rút ngắn mã, có thể chỉ định tất cả các thuộc tính padding trong một thuộc tính.

Thuộc tính padding là thuộc tính viết tắt cho các thuộc tính đệm riêng lẻ sau:

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