Monday, August 3, 2009

Tutorial: Margins and Padding

What is a Margin?

In a blog, the margin is the space between the columns.

What is padding?

Padding is the space between your content and the side of column.

In other words: "Blog margins define the space of each element in relation to each other, while padding defines the space within each element." -Bloggerbuster.com

(although I made this chart myself, I did get the idea off of www.bloggerbuster.com)

When I first made my 3 column template, I noticed that my words and pictures in each column were nearly touching, and then I did something and one of my columns ended up on the bottom. In frustration, I searched and searched for some help. I didn't know what it was called to even find it. Finally I did figure it out. This is what you do (this example is dealing with the settings I put on my 3 column tutorial).

First off, these are my favorite width settings in the HTML editor:

#header-wrapper {
width:1000px;

#outer-wrapper {
width: 1000px;

#main-wrapper {
width: 505px;

#sidebar-wrapper {
width: 210px;

#left-sidebar-wrapper {
width: 210px;

This is where one of the columns may be put on the bottom. To adjust your margins and padding, you need to change and add these lines in the HTML editor:

#main-wrapper {
padding: 0 5px 0 5px;
width: 505px;
margin-left: 8px;

#sidebar-wrapper {
padding: 0 5px 0 5px;

#left-sidebar-wrapper {
padding: 0 5px 0 5px;

That should fix the problem. If you want your sidebars or main-wrapper (the part with your posts in it) bigger or smaller, just adjust the settings to your liking.

If I am not totally clear on certain stuff, please let me know so I can clarify for you.

For a deeper Tutorial for adjusting margins and padding and such see Blogger Buster's tutorial here, which goes into a lot more detail.

2 comments:

Anonymous said...

Hi! Your tutorials are great. I am just trying to move the outer-wrapper border down because it it touching the navigation bar. I cannot seem to get it to move down without it affecting the left and right margins. Any suggestions??

Thanks!

Mama Nut said...

You know what? I had this same problem!! My navigation bars would overlap my post area. I kind of liked the look, and didn't mind so much... but I also found out, that I could add a text gadget between the navigation bar and the main body and only put like "*" or something like that and it would put a space there. Then I figured out that a line of ads didn't look to bad. But I settled for changing my navigation bar to the pictures, (here jelly beans and on my homepage post it notes) I have a tutorial here called Fun Navigation Buttons... or something like that, which shows how I did it.

Sorry, I couldn't be more help. I am just like the rest of you, figuring out how to do this stuff little by little :)

Blog Widget by LinkWithin