Thuộc tính Padding trong CSS - Fedu

CHÀO MỪNG BẠN ĐẾN VỚI THƯ VIỆN HỌC TẬP & ĐÀO TẠO CƠ BẢN

Thuộc tính Padding trong CSS

CSS Padding

Thuộc tính padding trong CSS được sử dụng để tạo ra khoảng trắng xung quanh nội dung.  Padding tạo một khoảng trắng bên trong đường viền của phần tử.

Với CSS, bạn có thể thiết lập thông số padding cho phần tử, bao gồm bên trên, bên phải, bên dưới và bên dưới.

Padding – thiết lập cho từng phía

Thuộc tính padding CSS xác định khoảng trắng cho mỗi phía của phần tử.

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

Tất cả thuộc tính padding có thể sử dụng các giá trị:

  • length – xác định khoảng cách theo px, pt, cm, etc.
  • % – xác định khoảng cách theo tỷ lệ % của độ rộng phần tử bên trong
  • inherit  –  xác định khoảng cách theo phần tử chứa bên ngoài nó

Ví dụ dưới đây thiết lập các khoảng padding khác nhau cho 4 phía của phần tử <p>:

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

Padding – thuộc tính ngắn gọn

Để viết gọn CSS, bạn có thể thiết lập các thuộc tính padding riêng lẻ thành một dòng. Thuộc tính padding có thể viết gọn theo từng thuộc tính:

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

Ví thế có một số trường hợp như sau:

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

  • padding: 25px 50px 75px 100px;
    • padding bên trên là 25px
    • padding bên phải là 50px
    • padding bên dưới là 75px
    • padding trái là 100px

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

  • padding: 25px 50px 75px;
    • padding bên trên là 25px
    • padđing bên trái và bên phải là 50px
    • padding bên dưới là 75px

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

  • padding: 25px 50px;
    • padding trên và dưới là 25px
    • padding trái và phải là 50px

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

  • padding: 25px;
    • cả 4 phía trên, phải, dưới, trái đều là 25px
div.ex1 {
    padding: 25px 50px 75px 100px;
}

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

div.ex3 {
    padding: 25px 50px;
}

div.ex4 {
    padding: 25px;
}

Tất cả thuộc tính padding trong CSS

Thuộc tính Mô tả
padding viết gọn tất cả thuộc tính padding thành một dòng duy nhất
padding-bottom thiết lập padding bên dưới của phần tử
padding-left thiết lập padding bên trái của phần tử
padding-right thiết lập padding bên phải của phần tử
padding-top thiết lập padding bên trên của phần tử