Home » CSS » CSS Padding Order Example

About Poliana Reis

Poliana graduated in Electric Engineering (E.E.) in 2006, when she started to work in the software development area. In 2012 she received the Masters of Computer Science. She is a multi-talent software developer with a leadership vein. Her greatest passion is the full stack of WEB development with major specialty in JEE platform.

CSS Padding Order Example

With this example we are going to demonstrate how to use the CSS Padding property including the CSS Padding order with various examples.

1. Introduction

HTML was developed paragraph display Scientific Papers. It’s how the Web was developed to show written and formatted Monographs For the Methodology of the Scientific Work ABNT . However , with Web Evolution and Its commercial potential, it became necessary to display information with great elements of wealth Graphics and Interaction .

Then, the CSS has emerged, which is another language, separated from HTML , with sole purpose of caring for the page stylization . The CSS solves this by separating things ; style rules no longer appear in HTML , only CSS.

The css specification is maintained by the word wide web consortium (W3C). Below you can find a complete guide with values and orders for CSS Padding Property defined in w3c specification.

2.The CSS Padding Property

In ours web page, sometimes it’s neccesary organising elements in a more easy-to-read and intuitive way. When we need align or change position of one html element putting some blank space before, after or in top or botton, you must to use the CSS Padding Property.

For you chage the padding of yours html elements you can use all properties below

padding-properties.css

 
    padding-top
    padding-right
    padding-bottom
    padding-left

2.1 CSS Padding Values

You can set the padding property for any html elements. In this article we will demonstrate this property in tag.

This example below is a example with out any formatting

padding-ex.html

lallalalallalallalallallalalallalallalall

 

lallalalallalallalallallalalallalallalall

 

lallalalallalallalallallalalallalallalall

 

lallalalallalallalallallalalallalallalall

wm-no-pad

Image 1 – Without any formatting

You can especify the values off padding in many ways:

px

my-padding-px.css

 
.my-padding-px {
	        padding-top: 25px;
		padding-right: 100px;
		padding-bottom: 50px;
		padding-left: 150px;
}

my-padding-px.html

lallalalallalallalallallalalallalallalall

 

lallalalallalallalallallalalallalallalall

 

lallalalallalallalallallalalallalallalall

 

lallalalallalallalallallalalallalallalall

wm-pad-px

Image 2 – Using px in padding property values

pt

my-padding-pt.html

.my-padding-pt {
		padding-top: 25pt;
		padding-right: 100pt;
		padding-bottom: 50pt;
		padding-left: 150pt;
		}

my-padding-pt.html

lallalalallalallalallallalalallalallalall

 

lallalalallalallalallallalalallalallalall

 

lallalalallalallalallallalalallalallalall

 

lallalalallalallalallallalalallalallalall

wm-pt

Image 3 – Using pt in padding property values

cm

my-padding-cm.css

.my-padding-cm {
		padding-top: 1cm;
		padding-right: 3cm;
		padding-bottom: 2cm;
		padding-left: 4cm;
		}

my-padding-cm.html

lallalalallalallalallallalalallalallalallall

 

lallalalallalallalallallalalallalallalallall

 

lallalalallalallalallallalalallalallalallall

 

lallalalallalallalallallalalallalallalallall

wm-cm

Image 4 – Using cm in padding property values

%

my-padding-percent.css

.my-padding-percent {
		padding-top: 5%;
		padding-right: 10%;
		padding-bottom: 15%;
		padding-left: 20%;
		}

my-padding-percent.html

lallalalallalallalallallalalallalallalallall

 

lallalalallalallalallallalalallalallalallall

 

lallalalallalallalallallalalallalallalallall

 

lallalalallalallalallallalalallalallalallall

wm-cm

Image 5 – Using cm in padding property values

2.1 CSS Padding Order

To shorten the code, it is possible to specify all the padding properties in one property. The padding property is a shorthand property for the four individual padding properties, and you need use in this order :padding-top, padding-right, padding-bottom, padding-left.

Padding property with four values

If the padding property has four values:


my-4-padding-together.css

 
.my-4-padding-together{
    padding: 10px 20px 30px 40px;
}

The order will be:

  • top padding is 10px
  • right padding is 20px
  • bottom padding is 30px
  • left padding is 40px

my-4-padding-together.html

lallalalallalallalallallalalallalallalallall

 

lallalalallalallalallallalalallalallalallall

 

lallalalallalallalallallalalallalallalallall

 

lallalalallalallalallallalalallalallalallall

wm-pad-4

Image 6 – Padding property with four values

Padding property with tree values

If the padding property has three values:

my-3-padding-together.css

 
.my-3-padding-together{
    padding: 10px 20px 30px ;
}

The order will be:

top padding is 10px
right and left paddings are 20px
bottom padding is 30px

my-3-padding-together.html

lallalalallalallalallallalalallalallalallall

 

lallalalallalallalallallalalallalallalallall

 

lallalalallalallalallallalalallalallalallall

 

lallalalallalallalallallalalallalallalallall

wm-pad-3

Image 7 – Padding property with tree values

Padding property with two values

If the padding property has two values:

span style=”text-decoration: underline;”>my-2-padding-together.css

 
.my-2-padding-together{
    padding: 10px 20px ;
}

The order will be:
top and bottom paddings are 10px
right and left paddings are 20px

my-2-padding-together.html

lallalalallalallalallallalalallalallalallall

 

lallalalallalallalallallalalallalallalallall

 

lallalalallalallalallallalalallalallalallall

 

lallalalallalallalallallalalallalallalallall

wm-pad-2

Image 8 – Padding property with two values

Padding property with one values

If the padding property has one value:

my-padding-one.css

 
.my-padding-one{
    padding: 10px ;
}

all four paddings are 10px

my-padding-one.html

lallalalallalallalallallalalallalallalallall

 

lallalalallalallalallallalalallalallalallall

 

lallalalallalallalallallalalallalallalallall

 

lallalalallalallalallallalalallalallalallall

wm-pad-one

Image 9 – Padding property with one value

3. Conclusion

The padding property is a shorthand property for the following individual padding properties: padding-top, padding-right, padding-bottom
and padding-left.

Κnowing the order to use it, you can improve your css, making a short code.

Do you want to know how to develop your skillset to become a Web Rockstar?

Subscribe to our newsletter to start Rocking right now!

To get you started we give you our best selling eBooks for FREE!

 

1. Building web apps with Node.js

2. HTML5 Programming Cookbook

3. CSS Programming Cookbook

4. AngularJS Programming Cookbook

5. jQuery Programming Cookbook

6. Bootstrap Programming Cookbook

 

and many more ....

 

I have read and agree to the terms & conditions

 

Subscribe
Notify of
guest

This site uses Akismet to reduce spam. Learn how your comment data is processed.

0 Comments
Inline Feedbacks
View all comments