Cách triển khai đệm trong CSS với các ví dụ



Bài viết này sẽ cung cấp cho bạn kiến ​​thức chi tiết và toàn diện về cách triển khai Padding trong CSS với các ví dụ.

Đệm là một trong những khía cạnh quan trọng nhất của và . Trong bài viết này, chúng ta sẽ thảo luận về tầm quan trọng và cách sử dụng Padding trong CSS theo thứ tự sau:

Padding trong CSS là gì?

Thuộc tính padding cho phép bạn chỉ định vị trí và khoảng cách sẽ xuất hiện giữa văn bản nội dung của một phần tử và đường viền của nó. Giá trị của thuộc tính này phải là độ dài hoặc tỷ lệ phần trăm hoặc từ.





Padding-in-CSS



Nếu giá trị được kế thừa, nó sẽ có cùng phần đệm với giá trị gốc. Ở đây nếu phần trăm được sử dụng, phần trăm là của hộp chứa.

Thuộc tính đệm

Các thuộc tính sau của Padding trong CSS có thể được sử dụng để kiểm soát danh sách. Tuy nhiên, bạn cũng có thể đặt các giá trị khác nhau cho phần đệm ở một trong hai bên của hộp, chủ yếu sử dụng các thuộc tính sau:

  • Padding-bottom: nó chỉ định phần đệm dưới cùng của một phần tử.



  • Padding-top: Nó chỉ định phần đệm trên cùng của một phần tử.

  • Phần đệm bên trái: Nó chỉ định phần đệm bên trái của phần tử.

  • Padding-right: Nó chỉ định phần đệm bên phải của phần tử.

    triển khai hashmap đơn giản trong java
  • Đệm: Đây là cách viết tắt cho các thuộc tính khác.

Thuộc tính Padding-bottom:

Điều này được đặt thành phần đệm dưới cùng của một phần tử. Nó có thể nhận các giá trị theo độ dài phần trăm.


Đây là đoạn văn được chỉ định đệm dưới cùng



Đây là một đoạn văn khác được chỉ định đệm dưới cùng theo tỷ lệ phần trăm

Đầu ra:

Thuộc tính Padding-top

Thuộc tính padding-top này sẽ đặt đệm trên cùng của một phần tử. Điều này có thể nhận các giá trị theo độ dài phần trăm.


Đây là đoạn được chỉ định đệm trên cùng



Đây là một đoạn văn khác được chỉ định đệm trên cùng theo tỷ lệ phần trăm

Đầu ra:

Thuộc tính Padding-left

Thuộc tính padding-left này sẽ đặt phần đệm bên trái của một phần tử. Nó có thể nhận các giá trị theo độ dài phần trăm.

lập trình socket tcp trong java


Đây là đoạn được chỉ định đệm bên trái



Đây là một đoạn văn khác được chỉ định phần đệm bên trái theo tỷ lệ phần trăm

Đầu ra:

Thuộc tính Padding-right

Thuộc tính padding-right này sẽ thiết lập padding bên phải của một phần tử. Nó có thể nhận các giá trị theo độ dài phần trăm.


Đây là đoạn văn được chỉ định đệm bên phải



Đây là một đoạn văn khác được chỉ định phần đệm bên phải theo tỷ lệ phần trăm

Đầu ra:

Thuộc tính đệm

Thuộc tính padding này đặt padding phải, trái, trên và dưới. Điều này có thể nhận các giá trị theo độ dài phần trăm.


Tất cả bốn phần đệm này sẽ là 20px



Phần đệm trên và dưới sẽ là 20px, bên phải và bên trái sẽ là 10% tổng chiều rộng của tài liệu



Phần đệm trên và dưới sẽ là 20px, phần đệm bên phải sẽ là 3% tổng chiều rộng của tài liệu, phần đệm dưới cùng và phần đệm trên cùng sẽ là 20px

Đầu ra:

Với điều này, chúng ta đến phần cuối của bài viết tuyệt vời này về Padding trong CSS. Tôi hy vọng bạn đã hiểu về các cách khác nhau mà chúng tôi có thể thêm phần đệm.

Nếu bạn muốn tìm hiểu thêm về phát triển web, hãy xem của Edureka. Đào tạo Chứng chỉ Phát triển Web sẽ giúp bạn học cách tạo các trang web ấn tượng bằng cách sử dụng HTML5, CSS3, Twitter Bootstrap 3, jQuery và Google API và triển khai nó cho Amazon Simple Storage Service (S3).

Nếu bạn vẫn quan tâm Nếu bạn có bất kỳ câu hỏi nào, bạn có thể đăng câu hỏi đó trong phần bình luận của blog “Padding in CSS” này và chúng tôi sẽ liên hệ lại với bạn trong thời gian sớm nhất.