Padding CSS

Biên khoảng cách của phần tử này là 70px.

Padding CSS

CSS padding Thuộc tính được sử dụng để tạo khoảng trống xung quanh nội dung của phần tử trong bất kỳ ranh giới được định nghĩa nào.

Bằng CSS, bạn có thể kiểm soát hoàn toàn biên khoảng cách (đệm). Một số thuộc tính có thể đặt biên khoảng cách cho mỗi bên (trên, phải, dưới và bên trái) của phần tử.

Padding - Bên riêng lẻ

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

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

Tất cả các thuộc tính biên khoảng cách đều có thể đặt các giá trị sau:

  • length - Đặt biên khoảng cách bằng px, pt, cm, v.v.
  • % - Đặt biên khoảng cách bằng phần trăm chiều rộng của phần tử bao gồm
  • inherit - Đặt để kế thừa biên khoảng cách từ phần tử cha

Lưu ý:Không được phép có giá trị âm.

Ví dụ

Đặt biên khoảng cách khác nhau cho bốn cạnh của phần tử <div>:

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

Thử ngay

Padding - 属性 viết tắt

Để rút gọn mã, bạn có thể chỉ định tất cả các thuộc tính biên khoảng cách trong một thuộc tính.

padding Thuộc tính là viết tắt của các thuộc tính khoảng cách trong cùng sau đây:

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

Công việc hoạt động như sau:

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

  • padding: 25px 50px 75px 100px;
    • Khoảng cách trong cùng bên trên là 25px
    • Khoảng cách trong cùng bên phải là 50px
    • Khoảng cách trong cùng bên dưới là 75px
    • Khoảng cách trong cùng bên trái là 100px

Ví dụ

Sử dụng thuộc tính viết tắt padding đã đặt bốn giá trị:

div {
  padding: 25px 50px 75px 100px;
}

Thử ngay

Nếu padding Thuộc tính đã đặt ba giá trị:

  • padding: 25px 50px 75px;
    • Khoảng cách trong cùng bên trên là 25px
    • Khoảng cách trong cùng bên phải và bên trái là 50px
    • Khoảng cách trong cùng bên dưới là 75px

Ví dụ

Sử dụng thuộc tính viết tắt padding đã đặt ba giá trị:

div {
  padding: 25px 50px 75px;
}

Thử ngay

Nếu padding Thuộc tính đã đặt hai giá trị:

  • padding: 25px 50px;
    • Khoảng cách trong cùng bên trên và bên dưới là 25px
    • Khoảng cách trong cùng bên phải và bên trái là 50px

Ví dụ

Sử dụng thuộc tính viết tắt padding đã đặt hai giá trị:

div {
  padding: 25px 50px;
}

Thử ngay

Nếu padding Thuộc tính đã đặt một giá trị:

  • padding: 25px;
    • Tất cả bốn khoảng cách trong cùng đều là 25px

Ví dụ

Sử dụng thuộc tính viết tắt padding đã đặt một giá trị:

div {
  padding: 25px;
}

Thử ngay

Khoảng cách trong cùng và độ rộng của phần tử

CSS width Thuộc tính xác định độ rộng của khu vực nội dung của phần tử. Khu vực nội dung là phần bên trong của phần tử (hộp mô hình) bao gồm khoảng cách trong cùng, viền và khoảng cách ngoài.

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

Ví dụ

Ở đây, độ rộng của phần tử <div> là 300px. Tuy nhiên, độ rộng thực tế của phần tử <div> sẽ là 350px (300px + khoảng cách trong cùng bên trái 25px + khoảng cách trong cùng bên phải 25px):

div {
  width: 300px;
  padding: 25px;
}

Thử ngay

Nếu bạn muốn giữ độ rộng là 300px, bất kể lượng lấp đầy như thế nào, bạn có thể sử dụng box-sizing Thuộc tính này sẽ làm cho phần tử giữ được độ rộng của nó. Nếu tăng khoảng cách trong cùng, không gian nội dung có thể sử dụng sẽ giảm.

Ví dụ

Sử dụng thuộc tính box-sizing để giữ độ rộng là 300px, bất kể lượng lấp đầy như thế nào:

div {
  width: 300px;
  padding: 25px;
  box-sizing: border-box;
}

Thử ngay

Những ví dụ khác

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

Tất cả các thuộc tính khoảng cách trong cùng CSS

Thuộc tính Mô tả
padding Đây là thuộc tính viết tắt để đặt tất cả các thuộc tính khoảng cách trong cùng trong một câu chỉ định.
padding-bottom Đặt khoảng cách trong cùng bên dưới của phần tử.
padding-left Đặt khoảng cách trong cùng bên trái của phần tử.
padding-right Đặt PADDING bên phải của phần tử.
padding-top Đặt PADDING trên cùng của phần tử.

Đọc thêm

Sách học thêm:Mô hình khung: PADDING trong CSS