PADDING CSS LÀ GÌ

     
Mẹo nhỏ: Để kiếm tìm kiếm đúng chuẩn các ấn phẩm của techftc.com, hãy search trên Google cùng với cú pháp: "Từ khóa" + "techftc.com". (Ví dụ: thiệp tân linh mục techftc.com). Search kiếm ngay

Chào các bạn, bây giờ chúng ta lại chạm mặt nhau trong một loạt bài hướng dẫn cần sử dụng CSS cơ phiên bản của techftc.com. Trong nội dung bài viết này mình sẽ ra mắt một trực thuộc tính new trong mô hình hộp của CSS, chính là thuộc tính padding. Vậy nó là gì và có công dụng như thế nào, hãy theo dõi bài viết này nhé.

Bạn đang xem: Padding css là gì

Khoảng Đệm CSS (padding)

Thuộc tính padding được được sử dụng rất phổ biến trong CSS để tạo không gian xung quanh câu chữ của phần tử, mặt trong bất kỳ đường viền đã xác minh nào.


*
techftc.com – nằm trong tính padding trong CSS

Nhìn hình tế bào tả mặt trên, bạn cũng có thể hiểu như sau: 1 phần tử luôn có một khoảng cách bình an với những bộ phận khác, ta gọi là margin, tiếp kế tiếp là con đường viền của phần tử (có thể = 0), rồi tiếp theo đến padding là phần khoảng phương pháp để nội dung không bị dí giáp vào viền. Mời chúng ta tiếp tục coi ví dụ bên dưới đây:

*
techftc.com—Tìm-hiểu-thuộc-tính-padding

Như vậy, chúng ta có thể hiểu đơn giản dễ dàng rằng: margin (phần màu cam) là dùng làm giữ khoảng cách giữa phần tử HTML này với phần tử khác, còn  padding nhằm giữ khoảng cách giữa viền (border) với nội dung phía bên trong nội bộ một phần tử HTML làm sao đó.

Xem thêm: Top 7 Mẫu Xe Đạp Giá Dưới 1 Triệu Tới 2 Triệu, Giá Rẻ 1 Triệu Đồng Có Xe Đạp Thể Thao Nào Tốt

Với CSS, chúng ta có toàn quyền kiểm soát và điều hành phần đệm padding này. Có những thuộc tính để thiết lập padding cho mỗi bên của một phần tử như padding-top: bên trên cùng; padding-bottom: bên dưới cùng; padding-left: ngoài cùng mặt trái; padding-right: kế bên cùng bên phải.

Xem thêm: Top 9 Lông Chân Có Tự Rụng Không ? Cùng Nghe Chuyên Gia Lí Giải

Khoảng đệm cho từng bên của phần tử

CSS có những thuộc tính nhằm chỉ định padding cho mỗi mặt của 1 phần tử:

padding-toppadding-rightpadding-bottompadding-left

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

length – hướng đẫn padding vào CSS theo px, pt, cm, v.v.% – chỉ định một trong những phần đệm bằng % chiều rộng lớn của phần tử chứaInherit – kế thừa – xác minh rằng phần đệm cần được thừa kế từ phần tử cha

Lưu ý: các giá trị âm không được phép.

Ví dụ sau đặt các phần đệm padding khác biệt cho tất cả bốn phương diện của phần tử 
:


div padding-top: 50px; padding-right: 30px; padding-bottom: 50px; padding-left: 80px;