Thuộc tính padding trong CSS | CSS Cơ Bản

 Thuộc tính padding khi sử dụng sẽ thêm khoảng không gian bên trong thành phần, khoảng không gian này sẽ được cộng dồn thêm vào chiều rộng hoặc chiều cao của thành phần (tùy vào hướng sử dụng padding).

Dạng cơ bản gồm 4 thuộc tính:

• padding-top: thêm khoảng không gian bên trong hướng trên thành phần.
• padding-right: thêm khoảng không gian bên trong hướng bên phải thành phần.
• padding-bottom: thêm khoảng không gian bên trong hướng dưới thành phần.
• padding-left: thêm khoảng không gian bên trong hướng bên trái thành phần.

Dạng tổng quát gồm 4 thuộc tính:

• padding với 4 giá trị.
• padding với 3 giá trị.
• padding với 2 giá trị.
• padding với 1 giá trị.

padding trong CSS được dùng để tạo khoảng trắng xung quanh nội dung của phần tử và nằm bên trong các đường viền trong CSS. Các đặc tính thiết lập cả 4 phía (trên, dưới, trái, phải) cho từng phần tử.

Nếu đặc tính padding có 4 giá trị

padding: 25px 50px 75px 100px;

lề trên 25px

lề phải 50px

lề dưới 75px

lề trái 100px

div {

 padding: 25px 50px 75px 100px;

}

Nếu đặc tính padding có 3 giá trị

padding: 25px 50px 75px;

lề trên 25px

lề trái và phải 50px

lề dưới 75px

div {

 padding: 25px 50px 75px;

}

Nếu đặc tính padding có 2 giá trị

padding: 25px 50px;

lề trên và dưới 25px

lề trái và phải 50px

div {

 padding: 25px 50px;

}

Nếu đặc tính padding có 1 giá trị

padding: 25px;

tất cả các lề đều là 25px

div {

 padding: 25px;

}