Phần đệm CSS

Phần đệm đượ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 padding 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).

Đệm - Các mặt riêng lẻ

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:

• chiều dài - 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
• kế thừa - chỉ định rằng phần đệm phải được kế thừa từ phần tử cha

Lưu ý: Không cho phép giá trị âm.

Đệm - 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 đệm 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

Vì vậy, đây là cách nó hoạt động:

Nếu thuộc tính padding có bốn giá trị:

• phần đệm: 25px 50px 75px 100px;
  • phần đệm trên cùng là 25px
  • phần đệm bên phải là 50px
  • phần đệm phía dưới là 75px
  • phần đệm bên trái là 100px

Nếu thuộc tính padding có ba giá trị:

• phần đệm: 25px 50px 75px;
  • phần đệm trên cùng là 25px
  • phần đệm bên phải và bên trái là 50px
  • phần đệm phía dưới là 75px

Nếu thuộc tính padding có hai giá trị:

• phần đệm: 25px 50px;
  • phần đệm trên và dưới là 25px
  • phần đệm bên phải và bên trái là 50px

Nếu thuộc tính padding có một giá trị:

• phần đệm: 25px;
  • tất cả bốn phần đệm đều là 25px

Phần đệm và chiều rộng phần tử

Thuộc tính CSS width chỉ định độ rộng của vùng nội dung của phần tử. Vùng nội dung là phần bên trong phần đệm, đường viền và lề của một phần tử ( mô hình hộp ).

Vì vậy, nếu một phần tử có chiều rộng được chỉ định, phần đệm được thêm vào phần tử đó sẽ được thêm vào tổng chiều rộng của phần tử. Đây thường là một kết quả không mong muốn.

Để giữ chiều rộng ở mức 300px, bất kể số lượng phần đệm, bạn có thể sử dụng thuộc tính box-sizing . Điều này khiến phần tử duy trì chiều rộng thực tế của nó; nếu bạn tăng khoảng đệm, không gian nội dung có sẵn sẽ giảm.

Thêm ví dụ

Đặt phần đệm bên trái
Ví dụ này minh họa cách đặt phần đệm bên trái của phần tử <p>.

Đặt phần đệm phù hợp
Ví dụ này minh họa cách đặt khoảng đệm bên phải của phần tử <p>.

Đặt phần đệm trên cùng
Ví dụ này minh họa cách đặt phần đệm trên cùng của phần tử <p>.

Đặt phần đệm phía dưới
Ví dụ này minh họa cách đặt khoảng đệm dưới cùng của phần tử <p>.

<phong cách>
h1 {
  : 30px;
}
</style>

<cơ thể>
  <h1>Đây là tiêu đề</h1>
  <p>Đây là một đoạn văn</p>
  <p>Đây là một đoạn văn</p>
</body>

Tất cả thuộc tính đệm CSS