- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Define Paddings for Individual Sides in CSS
CSS allows us to set side specific padding for elements. The padding-top, padding-right, padding-bottom and padding-right properties define the top, right, bottom and left padding respectively. The padding shorthand property can also be used to achieve the same output by specifying values in clock-wise direction.
Syntax
The syntax of CSS padding property is as follows −
Selector { padding-top: /*value*/ padding-right: /*value*/ padding-bottom: /*value*/ padding-left: /*value*/ }
The following examples illustrate styling of lists −
Example
<!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>What is Xamarin?</h2> <article> <span>Xamarin is a software company based in San Francisco. Xamarin is built on the .NET Framework.</span> It provides commercial software development tools that allow a user to develop applications for Android, iOS and Windows using C# language and the .NET framework. </article> </body> </html>
Output
Example
<!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>Swift programming language by Apple</h2> <div>Swift is a programming language developed by Apple Inc for iOS and OS X development. <div>Swift 4 uses the same runtime as the existing Obj-C system on Mac OS and iOS, which enables Swift 4 programs to run on many existing iOS 6 and OS X 10.8 platforms. </div> </div> </body> </html>
Output
- Related Articles
- Setting Margins for Individual Sides using CSS
- How to define multiple style rules for a single element in CSS?
- How to define the location of a font for download in CSS
- Define the CSS Box Model
- How to define multiple CSS attributes in jQuery?
- Define the number of columns in CSS Grid Layout
- Define a Cubic Bezier curve using CSS
- What is the method for designing an Individual Fact Table?
- How to define a measurement in screen pixels with CSS?
- Define the width of each column in CSS Grid Layout
- Define the height of each row in CSS Grid Container
- Fetch maximum individual marks for a student with marks1 and marks2 records in MySQL?
- Define skew transforms along with x axis using CSS
- Define skew transforms along with y axis using CSS
- Individual Variation: Meaning & Causes

Advertisements