Bài 9: CSS Padding

Phần tử này có padding là 70px.

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).

Padding cho từng cạnh

CSS Padding có các thuộc tính sau:

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

Tất cả các thuộc tính có thể có các giá trị sau:

độ dài – tạo một padding theo đơn vị px, pt, cm, etc.
% – tạo một padding theo % theo độ rộng của phần tử chứa nó.
Thừa kế – tạo padding được thừa kế từ phần tử cha.

Ví dụ sau dùng cả bốn thuộc tính của CSS Padding :

Ví dụ 1:


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

Padding – Cách viết ngắn

Code rút gọn, chúng ta có thể ghi rõ tất cả các thuộc tính trong một thuộc tính.

Thuộc tính của padding là thuộc tính viết tắt cho thuộc tính cá nhân sau đây:

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

Ví dụ 2:


p {
padding: 50px 30px 50px 80px;
}

Cách hoạt động của nó: Thuộc tính của padding có bốn giá trị:

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

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

padding: 25px 50px 75px tương ứng với:
- padding-top là 25px
- padding-right và padding-left là 50px
- padding-bottom là 75px

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

padding: 25px 50px tương ứng với:
- padding-top và padding-bottom là 25px
- padding-right và padding-left là 50px

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

padding: 25px tương ứng với:
- Tất cả bốn thuộc tính là 25px

Ví dụ 3:


div.ex1 {
padding: 25px 50px 75px 100px;
}div.ex2 {
padding: 25px 50px 75px;
}div.ex3 {
padding: 25px 50px;
}div.ex4 {
padding: 25px;
}

Các ví dụ khác

Tất cả các thuộc tính padding trong một khai báo
Ví dụ này sử dụng thuộc tính rút gọn cho tất cả các thuộc tính padding trong một khai báo, các giá trị truyền từ 1 đến 4 giá trị.

Thiết lập padding bên trái
Ví dụ này giới thiệu cách thiết lập padding bên trái của phần tử <p>.

Thiết lập padding bên phải
Ví dụ này giới thiệu cách thiết lập padding bên phải của phần tử <p>.

Thiết lập padding top
Ví dụ này giới thiệu cách thiết lập padding bên trên của phần tử <p>.

Thiết lập padding bottom
Ví dụ này giới thiệu cách thiết lập padding bên dưới của phần tử <p>.

Tất cả thuộc tính của Padding trong CSS

Thuộc tính	Mô tả
padding	Thuộc tính rút gọn cho tất cả các thuộc tính padding trong một khai báo
padding-bottom	Đặt padding ở bên dưới của một phần tử
padding-left	Đặt padding ở bên trái của một phần tử
padding-right	Đặt padding ở bên phải của một phần tử
padding-top	Đặt padding ở bên trên của một phần tử