CSS: Padding and Margins

Trying to float objects and station them in certain areas on your page can be confusing and time-consuming. Often, the difference between margins and paddings are blurred.

Margins:

Specifying a margin measurement in your CSS either lessens or adds to the space between divs. For instance, if your page has a “wrapper” or “overall” content div that holds all the little divs inside of it, you use the “margin” tool to create a little bit of breathing room between the all the divs. **If you aren’t sure what I mean about a “wrapper” or “overall” content div with a bunch of little divs, read my previous blog post to catch up.**

For instance:

#wrapper {

max-width:1380px;

min-width:1000px;

}

#nav {

float:left;

margin-right:4px;

margin-top:10px;

margin-left:5px;

}

#content {

float:left;

margin-right:5px;

margin-top:10px;

margin-left:3px;

}

The Result:

Obviously, it’s best to play around with different measurements to get an idea of how big you want the spaces between your divs to be. Pixels are the easiest and the most commonly used unit of measurement.

 

 

Padding:

Padding is slightly different. Padding measurements distinguish the distance between the border of each div and its content. So, using the same example as above:

#wrapper {

max-width:1380px;

min-width:1000px;

}

#nav {

float:left;

margin-right:4px;

margin-top:10px;

margin-left:5px;

padding-left:2px;

padding-right:2px;

padding-bottom:5px;

}

#content {

float:left;

margin-right:5px;

margin-top:10px;

margin-left:3px;

padding-left:3px;

padding-right:3px;

padding-bottom:5px;

}

The Result:

As you can see, the black boxes indicate the content. The spaces between the border of the div and the content are measured as specified in the code.

Many new designers get margins and padding confused. In fact, I just learned the difference between them the hard way this week, after presenting a faulty website to a class!

As always, check your code through a CSS or HTML validator.

–Hannah Miller

Advertisements

~ by him22 on February 27, 2011.

 
%d bloggers like this: