Home arrow Style Sheets arrow CSS: Margins Overview
STYLE SHEETS

CSS: Margins Overview


This article gives a basic overview of CSS margins as well as some examples.

Author Info:
By: wubayou
Rating: 5 stars5 stars5 stars5 stars5 stars / 7
May 17, 2012

print this article
SEARCH DEVARTICLES

This article gives a basic overview of CSS margins as well as some examples.

If you are new to CSS (Cascading Style Sheets), you have a lot of ground to cover.  Luckily, CSS is designed in a way that is easy to learn, and the fact that it can help you save a lot of work makes it well worth learning.  One of the topics that should receive some of your attention while learning CSS is the topic of margins.  As you work with CSS, the likelihood of you having to use and adjust margins is quite high, so this article will give you a basic introduction to margins and how you can implement them in your upcoming projects.

Before we get into the use and implementation of margins, we should first define what a margin is and does.  In basic terms, a margin clears a specific region outside of an element’s border.  A margin in CSS is both transparent and colorless.  The way you choose to define your margin properties with CSS will determine the amount of space around elements. 

Now that you know what margins are, let’s jump into a discussion of how you can manipulate their properties.  In CSS it is very easy to change or adjust the top, right, bottom, and left margins through the use of different properties for each.  This can be done on a one on one basis, but a simpler, cleaner way it to do it using the margin shorthand property.  With the margin shorthand property, you can change multiple margin characteristics at the same time in one quick swoop.  We will discuss the margin shorthand property in just a bit.  Before we do, however, let’s discuss the different CSS margin properties and the different types of values that can be used with CSS margins.

The Different CSS Margin Properties

Here is a list of the different CSS margin properties you will be working with:

1. margin-top – this specifies an element’s top margin
2. margin-bottom – this specifies an element’s bottom margin
3. margin-right – this specifies an element’s right margin
4. margin-left – this specifies an element’s left margin
5. margin – this is used when specifying margins via the margin shorthand property

The Different Categories of Values Associated with Margins

There are four different categories of values you can use with CSS margins.  Here they are:

1. length – this value allows you to declare a margin using a specific length measured via cm, pt, px, and so on.  By default, the margin length is set to 0px.
2. % - this value will create a margin derived from a specific percentage of the containing element’s width. 
3. inherit – this value takes into account the parent element and creates a margin that is inherited from that parent element.
4. auto – this value is used when you want the browser to automatically calculate a margin.

Putting Margins to Work

So far, we have given a basic introduction on CSS margins and explained their function.  We also detailed the different margin properties and categories of values that you will deal with when working with CSS margins.  Now it is time to take a look at how you can specify margins in CSS.

Specifying Margins for Different Sides – The Long Way

We already mentioned that you can specify margins on a one by one basis or by using the margin shorthand property.  Let’s begin with an example of the first method.  It is longer, but it will show you the overall technique.  Here it is:

margin-top:50px;
margin-bottom:50px;
margin-right:25px;
margin-left:25px;

As you can see in our example, we have declared four different margins.  The top is set to 50px, and so is the bottom.  The right and left margins, meanwhile, have been set to 25px each.  The format is not too overwhelming, but we can still make it cleaner via the margin shorthand property, which is up next.  Before we continue, it is worth noting that you can use negative values when specifying margins in CSS.  When would using negative values come in handy?  When you decide that you want to overlap content.

Specifying Margins Using the Margin Shorthand Property

The margin shorthand property is a good example of how CSS can make life easier.  In our example above, we showed how margins could be specified for the top, bottom, right, and left separately. 

While that is simple enough, why not use the margin shorthand property?  It is more concise and cleaner to look at, so you get the same functionality but with shorter code.  In essence, all you are doing here is using a single property to specify all of your margins.  You can have anywhere from one to four values for the margin property, depending on your needs. 

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

margin:50px;

This sets all four of our margins to 50px

margin:50px 100px;

This sets both the top and bottom margins to 50px, while the right and left margins are set to 100px

margin:45px 65px 95px;

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

margin:10px 20px 30px 40px;

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

Looking at our four examples, you should get the overall idea of how the margin shorthand property works.  The format is very simple, and you can adjust it to have just one value, or as many as four, depending on the margins you need to set.

Conclusion

In this tutorial, we offered a basic overview of CSS margins.  We detailed the different CSS margin properties, the different values (length, %, inherit, auto), and also showed you some examples of margins specified individually as well as via the margin shorthand property.  Hopefully you are now more comfortable when it comes to working with CSS margins and come back for more CSS tutorials in the 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