vùng đệm, khoảng cách từ đường viền đến nội dung của phần tử, thuộc tính padding

vùng đệm, khoảng cách từ đường viền đến nội dung của phần tử, thuộc tính padding

Tạo vùng đệm bằng thuộc tính padding trong CSS

Thuộc tính padding dùng để tạo vùng đệm giữa đường viềnnội dung của phần tử

Dưới đây là một số thuộc tính padding:

  • padding-top (vùng đệm phía trên)
  • padding-right (vùng đệm phía bên phải)
  • padding-bottom (vùng đệm phía dưới)
  • padding-left (vùng đệm phía bên trái)

Hình ảnh dưới đây sẽ minh họa cho bạn thấy vùng đệm ở từng vị trí:

Tạo vùng đệm bằng thuộc tính padding trong CSS

Ví dụ

h1{
    padding-top:20px;
    padding-right:40px;
    padding-bottom:80px;
    padding-left:160px;
}

Lưu ý: Giá trị của thuộc tính padding có thể là: px, em, %

Cú pháp thiết lập vùng đệm rút gọn

Thay vì phải thiết lập vùng đệm cho phần tử bởi bốn thuộc tính (padding-top, padding-right, padding-bottom, padding-left) riêng biệt, thì ta có thể gôm chúng lại thành một. Với cách này, ta có bốn cú pháp như sau:

padding: value;
  • Cả bốn vị trí đều có cùng giá trị value
padding: value1 value2;
  • padding-top & padding-bottom có giá trị value1
  • padding-right & padding-left có giá trị value2
padding: value1 value2 value3;
  • padding-top có giá trị value1
  • padding-right & padding-left có giá trị value2
  • padding-bottom có giá trị value3
padding: value1 value2 value3 value4;
  • padding-top có giá trị value1
  • padding-right có giá trị value2
  • padding-bottom có giá trị value3
  • padding-left có giá trị value4
Ví dụ

.p1{
    padding:20px;
}
.p2{
    padding:5px 100px;
}
.p3{
    padding:5px 150px 20px;
}
.p4{
    padding:10px 20px 40px 60px;
}

Tạo vùng đệm bằng thuộc tính padding trong CSS

Click giùm một cái QUẢNG CÁO để hỗ trợ duy trì website, các bạn ơi