In my time running eduStyle I’ve seen some common mistakes across many sites in the gallery. Lots of these revolve around the space between objects. So I though it might be useful to quickly cover 3 types of spacing that can easily improve your websites. For some of you this may be beginner information, you can probably skip this post. This post is for those that don’t really know much about margin, padding and line height. I’m not going to go into a lot of detail here, but I’ll show you 2 quick examples of each, one done wrong and one done right. I’ll also include a little code sample showing how to apply these to your pages.

1. Margin
2. Padding
3. Line Height

Margin

Margin is the space outside of objects. Images are the typical offenders. You’ll know there is no margin when you see the text in a page smash right into the side of an image.

Easy fix. If you have an image in a page floated to the left or to the right (what is a float?) you are going to want to add margins to the side opposite to the direction it is floated or aligned. You may also want to add margins to the top and bottom of the object as well. So if you have an image floated right you’ll probably want to add a top, bottom and left margin to get some space from the text wrapping around it. If you are floating the image right, add the margin top, bottom and left. If the image isn’t going to left or right, you’ll want to add top and bottom to make sure the text below and above aren’t squished against it. You can add the CSS code to do this in any one of 3 locations:

1. External style sheet
2. Between style tags in the head of the page
3. Inline in the tag for the image (or other object) you want to ad space to

Both 1 and 2 are done in basically the same way, so I’ll cover them together.

External style sheet or between the style tags in the head of the html document

First add a class to the style sheet or between the style tags in the head of the document:

.floatright {
    float: right;
    margin-left: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
}

Assign that style to the tag of the element you want to add the float and margin to using the class attribute:

<img src="images/myimage.jpg" class="floatright" />

The result will be something like this:

Inline in the tag for the image (or other object) you want to ad space to

You’ll add all of the CSS code inside of the style attribute of the object.

<img src="images/myimage.jpg" style="float: right; margin-left: 10px; margin-top: 10px; margin-bottom: 10px;" />

The result will be the same as above.

If you have any questions or anything to add, please leave a comment. Next up will be part 2 on padding.

This entry was posted on Monday, February 23rd, 2009 at 10:25 am and is filed under Design, How to. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.