Khái niệm

padding là một thuộc tính trong CSS được sử dụng để tạo khoảng cách giữa nội dung và đường viền của khối.

padding có nhiều cách triển khai, ví dụ:

• padding : 10px nghĩa là khoảng cách chung quanh nội dung là 10px
• padding : 10px 20px nghĩa là khoảng các top/bottom là 10px và khoảng cách left/right là 20px
• padding : 10px 20px 30px nghĩa là khoảng cách top là 10px, khoảng cách left/right là 20px và khoảng cách bottom là 30px
• padding : 10px 20px 30px 40px nghĩa là khoảng cách top là 10px, right là 20px, bottom là 30px và right là 40px

Ta còn có thể thiết lập khoảng cách riêng biệt cho một hướng bằng cách sử dụng:

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

Cách sử dụng

Ví dụ

HTML

<h1>Hello<h1>
<p>Everyone</p>

CSS

h1 {
  padding: 20px;
  background: lightcoral;
}

Kết quả

Trải nghiệm