CSS 14 – Thuộc tính Padding trong CSS

0
179

Xin chào các bạn, bài trước mình đã hướng dẫn các bạn cách sử dụng thuộc tính margin trong CSS rồi, và bài tiếp theo hôm nay, chúng ta sẽ cùng tìm hiểu về thuộc tính Padding trong CSS nhé.

Định nghĩa

Thuộc tính padding là thuộc tính cho phép bạn xác định khoảng cách không gian giữa nội dung hiển thị của 1 phần tử với đường viền border của nó.

Thuộc tính Padding trong CSS

Thuộc tính padding được chia làm 2 dạng sử dụng:

  • Dạng cơ bản gồm 4 thuộc tính là: padding-top, padidng-right, padding-bottom và padidng-left.
  • Dạng tổng quát (viết tắt) gồm 4 thuộc tính:
    • padidng với 4 giá trị.
    • padding với 3 giá trị.
    • padidng với 2 giá trị.
    • padidng với 1 giá trị.

Cấu trúc sử dụng dạng cơ bản

Bảng dưới đây sẽ liệt kê các giá trị bạn có thể sử dụng:

Thuộc tính Giá trị Mô tả
padding-top đơn vị auto inherit Xác định phần padding bêntrên của nội dung hiển thị, đơn vị có thể là px, em, %, …
padding-right đơn vị auto inherit Xác định phần padding bên phải của nội dung hiển thị, đơn vị có thể là px, em, %, …
padidng-bottom đơn vị auto inherit Xác định phần padding bên dưới của nội dung hiển thị, đơn vị có thể là px, em, %, …
padidng-left đơn vị auto inherit Xác định phần padding bên tráicủa nội dung hiển thị, đơn vị có thể là px, em, %, …

Các cách viết tắt thuộc tính padding

Sử dụng thuộc tính padding giúp bạn viết ít code hơn mà vẫn có thể điều khiển được phần không gian padding xung quanh nội dung hiển thị của một phần tử.

Tùy theo thứ tự các giá trị bạn xác định trong thuộc tính padding mà các thuộc tính trên sẽ nhận giá trị tương ứng như sau:

Cách viết 4 thành phần

Cách viết này sử dụng khi 4 giá trị top, right, bottom và left khác nhau.

Cú pháp:

Ví dụ:

Dòng padidng ở trên tương đương với các giá trị sau:

  • padding-top: 5px;
  • padding-right: 10px
  • padding-bottom: 3px
  • padding-left: 20px

Cách viết 3 thành phần

Cách viết này sử dụng khi 2 giá trị right và left bằng nhau, còn 2 giá trị top và bottom khác nhau và khác cả giá trị left, right.

  • top: là giá trị của padding-top
  • [left right]: là giá trị chung của padding-left và padding-right
  • bottom: là giá trị của padding-bottom

Cấu trúc:

Cách viết 2 thành phần

Cách viết này sử dụng khi 2 giá trị right và left bằng nhau và 2 giá trị top và bottom bằng nhau.

  • [top bottom]: là giá trị chung của padding-top và padding-bottom
  • [left right]: là giá trị chung của padding-left và padding-right

Cấu trúc:

Cách viết 1 thành phần

Cách viết này sử dụng khi cả 4 giá trị top, right, bottom và left đều bằng nhau.

[top left bottom right]

: là giá trị chung của padding-top, padding-right, padding-left và padding-bottom

Cấu trúc:

Ví dụ tổng quát

Bước 1: Tạo file HTML và CSS nằm ngang hàng nhau.

File padding.html với nội dung:

File style.css có nội dung như sau:

Hiển thị khi chưa sử dụng thuộc tính padding như sau:

Bước 2: Sử dụng thuộc tính padding cho thẻ đoạn văn <p>

Ví dụ trên đây sử dụng cách viết tắt 4 giá trị padding: 10px 30px 20px 50px;

Bạn có thể viết tương đương đầy đủ như sau:

Lưu ý:

  • Các bạn có thể áp dụng thuộc tính padding để đẩy nội dung cách thành phần bao ngoài 1 khoảng cách nhất định -> đẩy nội dung vào bên trong.
  • Với padding, bạn cũng có thể xác định một giá trị âm cho thuộc tính này để tạo các phần nội dung đi ngược thứ tự hiển thị thành phần.

Kết luận

Như vậy, bài hôm nay mình đã hướng dẫn cho các bạn xong thuộc tính Padding trong CSS. Đây là một thuộc tính rất quan trọng giúp các bạn tạo khoảng cách giữa phần nội dung với thành phần quanh nội dung đó trong website.

Chúc các bạn học tập tốt!  

 

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây