{"id":13434,"date":"2016-06-23T16:15:08","date_gmt":"2016-06-23T13:15:08","guid":{"rendered":"http:\/\/www.webcodegeeks.com\/?p=13434"},"modified":"2018-01-08T14:12:04","modified_gmt":"2018-01-08T12:12:04","slug":"css-padding-order-example","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/css\/css-padding-order-example\/","title":{"rendered":"CSS Padding Order Example"},"content":{"rendered":"

With this example we are going to demonstrate how to use the CSS Padding property including the CSS Padding order with various examples.<\/p>\n

1. Introduction<\/h2>\n

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 .<\/p>\n

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.<\/p>\n

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.
\n[ulp id=’nAkUl5IbAjqlXSla’]<\/p>\n

2.The CSS Padding Property<\/h2>\n

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.<\/p>\n

For you chage the padding of yours html elements you can use all properties below<\/p>\n

padding-properties.css<\/em><\/span><\/p>\n

 \r\n    padding-top\r\n    padding-right\r\n    padding-bottom\r\n    padding-left\r\n<\/pre>\n
2.1 CSS Padding Values<\/h3>\n
You can set the padding property for any html elements. In this article we will demonstrate this property in tag.<\/p>\n
This example below is a example with out any formatting<\/p>\n
padding-ex.html<\/em><\/span><\/p>\n
lallalalallalallalallallalalallalallalall<\/p>\n
 <\/p>\n
lallalalallalallalallallalalallalallalall<\/p>\n
 <\/p>\n
lallalalallalallalallallalalallalallalall<\/p>\n
 <\/p>\n
lallalalallalallalallallalalallalallalall<\/p>\n
\"wm-no-pad\"<\/a>
Image 1 \u2013 Without any formatting<\/figcaption><\/figure>\n
You can especify the values off padding in many ways:<\/p>\n
px<\/h4>\n
my-padding-px.css<\/em><\/span><\/p>\n
 \r\n.my-padding-px {\r\n\t        padding-top: 25px;\r\n\t\tpadding-right: 100px;\r\n\t\tpadding-bottom: 50px;\r\n\t\tpadding-left: 150px;\r\n}\r\n<\/pre>\n
my-padding-px.html<\/em><\/span><\/p>\n
<\/pre>\n
lallalalallalallalallallalalallalallalall<\/p>\n
 <\/p>\n
lallalalallalallalallallalalallalallalall<\/p>\n
 <\/p>\n
lallalalallalallalallallalalallalallalall<\/p>\n
 <\/p>\n
lallalalallalallalallallalalallalallalall<\/p>\n
\"wm-pad-px\"<\/a>
Image 2 – Using px in padding property values<\/figcaption><\/figure>\n
pt<\/h4>\n
my-padding-pt.html<\/em><\/span><\/p>\n
.my-padding-pt {\r\n\t\tpadding-top: 25pt;\r\n\t\tpadding-right: 100pt;\r\n\t\tpadding-bottom: 50pt;\r\n\t\tpadding-left: 150pt;\r\n\t\t}\r\n<\/pre>\n
my-padding-pt.html<\/em><\/span><\/p>\n
<\/pre>\n
lallalalallalallalallallalalallalallalall<\/p>\n
 <\/p>\n
lallalalallalallalallallalalallalallalall<\/p>\n
 <\/p>\n
lallalalallalallalallallalalallalallalall<\/p>\n
 <\/p>\n
lallalalallalallalallallalalallalallalall<\/p>\n
\"wm-pt\"<\/a>
Image 3 – Using pt in padding property values<\/figcaption><\/figure>\n
cm<\/h4>\n
my-padding-cm.css<\/em><\/span><\/p>\n
.my-padding-cm {\r\n\t\tpadding-top: 1cm;\r\n\t\tpadding-right: 3cm;\r\n\t\tpadding-bottom: 2cm;\r\n\t\tpadding-left: 4cm;\r\n\t\t}\r\n<\/pre>\n
my-padding-cm.html<\/em><\/span><\/p>\n
<\/pre>\n
lallalalallalallalallallalalallalallalallall<\/p>\n
 <\/p>\n
lallalalallalallalallallalalallalallalallall<\/p>\n
 <\/p>\n
lallalalallalallalallallalalallalallalallall<\/p>\n
 <\/p>\n
lallalalallalallalallallalalallalallalallall<\/p>\n
\"wm-cm\"<\/a>
Image 4 – Using cm in padding property values<\/figcaption><\/figure>\n
%<\/h4>\n
my-padding-percent.css<\/em><\/span><\/p>\n
.my-padding-percent {\r\n\t\tpadding-top: 5%;\r\n\t\tpadding-right: 10%;\r\n\t\tpadding-bottom: 15%;\r\n\t\tpadding-left: 20%;\r\n\t\t}\r\n<\/pre>\n
my-padding-percent.html<\/em><\/span><\/p>\n
<\/pre>\n
lallalalallalallalallallalalallalallalallall<\/p>\n
 <\/p>\n
lallalalallalallalallallalalallalallalallall<\/p>\n
 <\/p>\n
lallalalallalallalallallalalallalallalallall<\/p>\n
 <\/p>\n
lallalalallalallalallallalalallalallalallall<\/p>\n
\"wm-cm\"<\/a>
Image 5 – Using cm in padding property values<\/figcaption><\/figure>\n
2.1 CSS Padding Order<\/h3>\n
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.<\/p>\n
Padding property with four values<\/h4>\n
If the padding property has four values:<\/p>\n

\nmy-4-padding-together.css<\/em><\/span><\/p>\n
 \r\n.my-4-padding-together{\r\n    padding: 10px 20px 30px 40px;\r\n}\r\n<\/pre>\n
The order will be:<\/p>\n