Padding CSS - Tạo Khoảng Trống Với Phong Cách

Padding CSS là công cụ linh hoạt, giúp bạn tạo ra khoảng trống giữa nội dung và đường viền của một phần tử. Hãy tham khảo bài học CSS của Mytour để hiểu rõ hơn về cách sử dụng thuộc tính padding trong CSS.

Padding CSS - Kỹ Thuật Tạo Khoảng Trống Linh Hoạt

1. Công Cụ Tinh Tế Của Thuộc Tính Padding

CSS không chỉ cung cấp các bí mật để định rõ khoảng trống cho từng phần của phần tử:

- Bí Quyết Padding Làm Đẹp Phần Đầu.

- Padding-phải Của Thuộc Tính Lộ Trình.

- Nền Tảng Padding.

- Lối Đi Bí Mật Của Padding.

Tất Cả Bạn Cần Biết Về Bí Mật Của Padding:

- length: xác định kích thước của padding bằng đơn vị px, pt, cm, ... .

- %: đặt giá trị của padding dưới dạng phần trăm chiều rộng của phần tử chứa.

- inherit: lấy giá trị padding từ phần tử cha.

Lưu ý: Không sử dụng giá trị âm cho thuộc tính padding.

Ví dụ:

Kết quả sẽ xuất hiện như sau:

1.1 Padding rút gọn

Để giảm mã, chúng ta có thể gộp tất cả thuộc tính padding vào một khai báo duy nhất.

Sử dụng thuộc tính padding để đặt tất cả các thuộc tính sau trong một khai báo:

- Padding bên trên.

- Padding bên phải.

- Padding bên dưới.

- Thuộc tính padding bên trái.

Trong trường hợp này:

- Khi thuộc tính padding có 4 giá trị:

padding: 25px 50px 75px 100px;

Khoảng cách phía trên là 25px

Khoảng cách phía phải là 50px

Khoảng cách phía dưới là 75px

Khoảng cách phía trái là 100px

Ví dụ 1:

Kết quả hiển thị sẽ giống như sau:

- Nếu thuộc tính padding có 3 giá trị:

padding: 25px 50px 75px;

Padding ở phía trên có kích thước 25px

Padding ở phía phải và trái là 50px

Padding ở phía dưới có độ rộng là 75px

Ví dụ 2:

Kết quả cuối cùng hiển thị như sau:

- Nếu thuộc tính padding có 2 giá trị:

padding: 25px 50px;

Phần padding ở bên trên và dưới sẽ có kích thước là 25px

Khoảng cách ở phía bên phải và bên trái của phần tử sẽ là 50px

Ví dụ 3:

Kết quả hiển thị như sau:

- Nếu chỉ định thuộc tính padding với 1 giá trị:

padding: 25px;

Tất cả các khoảng cách đều là 25px

Ví dụ 4:

Kết quả hiển thị như sau:

1.2 Chiều rộng (width)

Thuộc tính width trong CSS quy định bề ngang của khu vực nội dung của một phần tử. Khu vực nội dung là phần bên trong padding, đường viền và lề của phần tử (được gọi là Box Model - mô hình hộp bao bọc một phần tử).

Vì vậy, khi chúng ta chỉ định chiều rộng của phần tử, việc thêm padding sẽ được tính vào chiều rộng tổng của phần tử.

Ví dụ 1:

Kết quả xuất hiện như sau:

Trong ví dụ này, phần tử div có chiều rộng được xác định là 30px. Tuy nhiên, chiều rộng thực tế của phần tử div là 350px (300px + 25px padding bên trái + 25px padding bên phải).

Để duy trì chiều rộng ban đầu của phần tử div là 300px ngay cả khi thêm padding, chúng ta áp dụng thuộc tính box-sizing.

Ví dụ 2:

Kết quả hiển thị như sau:

1.3 Thuộc tính padding trong CSS

Dưới đây là danh sách đầy đủ các thuộc tính padding trong CSS:

Bài giảng trên đây từ Mytour đã giới thiệu các thuộc tính padding trong CSS. Ngoài ra, độc giả có thể xem thêm một số bài học về CSS khác trên Mytour để hiểu thêm về thuộc tính margin trong CSS.