Thuộc tính padding của CSS

Định nghĩa và cách sử dụng

Thuộc tính viết tắt padding đặt tất cả các thuộc tính lề nội bộ trong một biểu thị.

Giải thích

Thuộc tính viết tắt này thiết lập chiều rộng của tất cả các lề nội bộ của phần tử, hoặc thiết lập chiều rộng của lề mỗi bên. Lề nội bộ được đặt trên các phần tử nội tuyến không thay thế sẽ không ảnh hưởng đến việc tính toán chiều cao dòng; vì vậy, nếu một phần tử có cả lề nội bộ và nền, từ góc nhìn trực quan có thể mở rộng đến các dòng khác, thậm chí có thể chồng chéo với nội dung khác. Nền của phần tử sẽ mở rộng qua lề nội bộ. Không được phép chỉ định giá trị lề âm.

Ghi chú:Không được phép sử dụng giá trị âm.

Ví dụ 1

padding:10px 5px 15px 20px;
  • Lề trên là 10px
  • Lề phải là 5px
  • Lề dưới là 15px
  • Lề trái là 20px

Ví dụ 2

padding:10px 5px 15px;
  • Lề trên là 10px
  • Lề phải và lề trái là 5px
  • Lề dưới là 15px

Ví dụ 3

padding:10px 5px;
  • Lề trên và lề dưới là 10px
  • Lề phải và lề trái là 5px

Ví dụ 4

padding:10px;
  • Tất cả bốn lề đều là 10px

Xem thêm:

Hướng dẫn CSS:Cân chỉnh nội bộ CSS

Hướng dẫn HTML DOM:Thuộc tính padding

Ví dụ

Đặt bốn lề cho phần tử p:

p
  {
  padding:2cm 4cm 3cm 4cm;
  }

Thử làm ngay

Ngôn ngữ CSS

padding: length|initial|inherit;

Giá trị thuộc tính

Giá trị Mô tả
auto Trình duyệt tính toán lề nội bộ.
length Định nghĩa giá trị lề nội bộ bằng đơn vị cụ thể, ví dụ như pixel, cm, v.v. Giá trị mặc định là 0px.
% Định nghĩa lề nội bộ dựa trên phần trăm chiều rộng của phần tử cha.
inherit Định nghĩa rằng lề nội bộ nên được kế thừa từ phần tử cha.

Chi tiết kỹ thuật

Giá trị mặc định: 0
Di truyền: no
Phiên bản: CSS1
Ngôn ngữ语法: object.style.padding="10px 5px"

TIY ví dụ

Tất cả các thuộc tính lề trong một biểu thị
Ví dụ này minh họa cách sử dụng thuộc tính viết tắt để đặt tất cả các thuộc tính lề trong một biểu thị, có thể có một đến bốn giá trị.

Hỗ trợ trình duyệt

Số trong bảng chỉ ra phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính này.

Chrome IE / Edge Firefox Safari Opera
1.0 4.0 1.0 1.0 3.5