Home arrow Style Sheets arrow CSS Padding Overview
STYLE SHEETS

CSS Padding Overview


This article will provide a closer look at CSS padding by explaining the topic and offering a few examples of how it can be applied.

Author Info:
By: wubayou
Rating: 5 stars5 stars5 stars5 stars5 stars / 8
May 31, 2012

print this article
SEARCH DEVARTICLES

This article will provide a closer look at CSS padding by explaining the topic and offering a few examples of how it can be applied.

As is usually the case when learning a new subject, jumping into the world of Cascading Style Sheets, or CSS, involves some work.  Sure, there is a lot of ground to cover, but the good news is that CSS is very useful, so it is worth your time.  Also, the way in which it is structured is rather easy to learn.  While we have already covered the topic of CSS margins in the past, today we are going to discuss something that is similar in format, but a bit different in functionality and purpose – padding.  Just like with margins, padding is something that you will probably run across as you work with CSS, so the goal of this tutorial is to have you understand the concept so you can apply it to your projects in the future.

Prior to offering examples of how padding in CSS works, we should first define what padding is and what purpose it serves.  In essence, padding refers to the space between an element and its border.  While we noted that margins refer to the space outside an element’s border, padding takes us inside the border.  From those descriptions, you can now see how margins and padding could be considered as being closely related.

It is worth noting that an element’s background color will affect padding.  Compare that to margins, which are both transparent and colorless.

Now, adjusting padding in CSS will help you determine the space between the element and its border.  Executing this task is quite easy to do in CSS, and it can be accomplished using two different methods.  If you prefer the long, drawn out approach, you can change padding for the top, right, bottom, and left sides on a one by one basis.  Here you can adjust the properties separately to indicate the padding you desire.  If you prefer a method that involves a shortcut, yet still provides the same final result, this can be accomplished by using what is called the shorthand padding property.  The shorthand padding property is more concise and allows you to change all of your padding properties in one swoop.

We will offer examples of both methods that you can use to change padding properties in a bit.  Before we do, however, let’s discuss the different types padding properties as well as the different types of values you will run across when adjusting padding in CSS.

The Different CSS Padding Properties

Here is a list of the different CSS padding properties you will be working with.  We will show examples of these later on in the tutorial.

1. padding-top – this specifies an element’s top padding
2. padding-bottom – this specifies an element’s bottom padding
3. padding-right – this specifies an element’s right padding
4. padding-left – this specifies an element’s left padding
5. padding – this is used when specifying padding properties via the padding shorthand property
The Different Categories of Values Associated with Padding in CSS

There are two different categories of values you can use with CSS padding.  Here they are:

1. length – this value allows you to declare padding using a specific length measured via cm, pt, px, and so on.   This is the type of value that you would choose if you know an exact number you want to define for your padding.
2. % - this value will create padding derived from a specific percentage of the containing element’s size.  Use this type of value if you do not have an exact number that you want to define for padding and want to derive a figure that is comparable to the element in question.

Putting Padding to Work

Now that we have gone over the different CSS padding properties, as well as the different categories of values associated with padding in CSS, it is time to actually put padding into action with our two different aforementioned methods and some corresponding examples.

Specifying Padding for Different Sides – The Long Way

We already noted that you have the option to specify padding on a one by one basis or via the padding shorthand property.  We will start by showcasing the one by one basis of specifying padding for different sides, as it shows you a breakdown of the padding in a more complete manner.  Once we are finished, we will move on to the padding shorthand property.

Here is an example of specifying padding in CSS for each side individually:

padding-top:50px;
padding-bottom:50px;
padding-right:100px;
padding-left:100px;

As you can see in the example above, we have declared padding for four different sides.  The top is set to 50px, and so is the bottom.  The right and left margins, meanwhile, have been set to 100px each.  The format is not too overwhelming and is easy to understand and comprehend, but we can still make it cleaner via the padding shorthand property, which is up next. 

Specifying Padding Using the Padding Shorthand Property

A perfect example of how CSS can help make your life easier is the padding shorthand property.  In the previous section, we showed you how you can specify padding for different sides individually using the long method.

The long method is simple, but now that we know how padding works, why not implement the padding shorthand property?  It is cleaner and more concise, which should be a goal of yours when it comes to code.  All we are doing with this shorthand property is using a single property to specify all the padding.  You can employ anywhere from one to four values for the padding property.

Here are four different examples that showcase the padding shorthand property with different numbers of values:

padding:50px;

This sets all four sides of padding to 50px

padding:50px 100px;

This sets both the top and bottom padding to 50px, while the right and left padding is set to 100px.

padding:45px 65px 95px;

This begins by setting the top padding to 45px.  Next, it sets the right and left padding to 65px.  Lastly, it sets the bottom padding to 95px.

padding:10px 20px 30px 40px;

This gives each of our four padding specifications a unique value.  The top padding is set to 10px.  The right padding is set to 20px.  The bottom padding is set to 30px.  Last, but not least, the left padding is set to 40px. 

Conclusion

We just used this tutorial to offer a quick and basic look at CSS padding.  We discussed the different CSS padding properties, the different values, and also offered some examples of padding specified the long way and via the padding shorthand property.  You should now be more acquainted with CSS padding.  Remember to visit us again for more CSS tutorials in the near future.


DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

All Style Sheets Tutorials
More By wubayou


blog comments powered by Disqus
STYLE SHEETS ARTICLES

- CSS Padding Overview
- CSS: Margins Overview
- Top CSS3 Button Tutorials
- More Top CSS3 Tutorials for Animation and Im...
- CSS Mega Menus: Adding Extra Sections
- CSS Mega Menus
- CSS3 Accordian Menu: Horizontally Display Hy...
- CSS Combinators: Working with Child Combinat...
- CSS Combinators: Using General Siblings
- Intro to CSS Combinators
- CSS Semicircles and Web Page Headers
- Drawing Circular Shapes with CSS3 and Border...
- More CSS Pagination Link Templates
- CSS Pagination Links
- Animated CSS3 Image Gallery: Advanced Transi...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials