CSS cho phép chúng ta đặt padding đặc thù cho từng cạnh của phần tử. Các thuộc tính padding-top, padding-right, padding-bottom và padding-left định nghĩa padding trên, phải, dưới và trái tương ứng. Thuộc tính viết tắt padding cũng có thể dùng để đạt kết quả tương tự bằng cách chỉ định giá trị theo chiều kim đồng hồ.
Cú pháp
Cú pháp của thuộc tính CSS padding như sau:
Selector { padding-top: /*giá trị*/ padding-right: /*giá trị*/ padding-bottom: /*giá trị*/ padding-left: /*giá trị*/ }
Các ví dụ sau minh họa việc tạo kiểu:
Ví dụ
<!DOCTYPE html> <html> <head> <style> article { margin: 2em 1em; padding: 3%; background-color: plum; letter-spacing: 0.05em; } span { padding: 0 53%; border-right: dashed; background-image: linear-gradient(to right, lavenderblush, lightblue); font-size: 1.4em; font-style: italic; } </style> </head> <body> <h2>Xamarin là gì?</h2> <article> <span>Xamarin là công ty phần mềm có trụ sở tại San Francisco. Xamarin được xây dựng trên .NET Framework.</span> Nó cung cấp các công cụ phát triển phần mềm thương mại cho phép người dùng phát triển ứng dụng cho Android, iOS và Windows bằng ngôn ngữ C# và framework .NET. </article> </body> </html>
Kết quả
Ví dụ khác
<!DOCTYPE html> <html> <head> <style> div { max-width: 400px; padding-left: 30px; padding-top: 44px; padding-bottom: 60px; background-image: linear-gradient(to bottom, oldlace, lightblue); border: thin solid; text-align: center; } div > div { padding-right: 70px; } </style> </head> <body> <h2>Ngôn ngữ lập trình Swift của Apple</h2> <div>Swift là ngôn ngữ lập trình do Apple Inc phát triển cho iOS và OS X. <div>Swift 4 sử dụng cùng runtime với hệ thống Obj-C hiện có trên Mac OS và iOS, cho phép chương trình Swift 4 chạy trên nhiều nền tảng iOS 6 và OS X 10.8 hiện có. </div> </div> </body> </html>
Kết quả
