Thuộc tính CSS Padding

CSS padding có các thuộc tính được sử dụng để tạo ra khoảng trống xung quanh nội dung.

Padding dành một vùng trống xung quanh nội dung (bên trong đường viền) của một phần tử (thẻ).

Với CSS, bạn có toàn quyền điều khiển padding như mong muốn. Các thuộc tính của CSS cho phép đặt padding cho từng bên của một phần tử (bên trên, bên phải, bên dưới, bên trái).

Cú pháp:

tagName {
    padding: giá trị;
}

Các thuộc tính của padding

Cách dùng padding trong css

padding dùng để dùng để xác định khoản cách từ nội dung tới border. padding có thể có từ 1 tới 4 giá trị:

Ví dụ:

1. padding: 25px 50px 75px 100px tương ứng với: 
   1. padding-top là 25px
   2. padding-right là 50px
   3. padding-bottom là 75px
   4. padding-left là 100px

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

      2. padding: 25px 50px 75px tương ứng với:

1. padding-top là 25px
2. padding-right và padding-left là 50px
3. padding-bottom là 75px

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

     3. padding: 25px 50px tương ứng với:

1. padding-top và padding-bottom là 25px
2. padding-right và padding-left là 50px

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

    4. padding: 25px tương ứng với:

1. Tất cả bốn thuộc tính là 25px

Ví dụ: Sử dụng các thuộc tính trên

<style>
div.ex1 {
padding: 25px 50px 75px 100px;
}div.ex2 {
padding: 25px 50px 75px;
}div.ex3 {
padding: 25px 50px;
}div.ex4 {
padding: 25px;
}
</style>
<h2>Sử dụng thuộc tính padding rút gọn</h2>

<div class="ex1">Phần tử div này có padding top là 25px, padding right là 50px, padding bottom là 75px và padding left là 100px.</div><br>

<div class="ex2">Phần tử div này có padding top là 25px, padding right và left là 50px, padding bottom là 75px.</div><br>

<div class="ex3">Phần tử div này có padding top và bottom là 25px, padding left và right là 50px.</div><br>

Xem ví dụ