Nothing is for sale here. Freewill tips keep the site running. Want to help? → Tip via Paypal

Image Margins

Without using a margin around an image the text can butt up right against the image, like you see with the image to the left of a very happy frog.

Not only does the lack of white space look amateurish, but it makes this area of the page look cluttered . . . because it is cluttered. Text can also be too close to the image at the top or bottom.

That’s not a good thing.

If you’re unfamiliar with the term white space, it just means empty space on the page. White space acts as a visual rest stop and lends the page a sense of balance and a calmer feel. Without these “visual rest stops” a page often feels cluttered and chaotic.

Notice how a simple light ray turned this picture of a woman to the right into an artistic expression. Notice how much nicer the layout looks around the photo of the woman. The text isn’t smack up against the edge of the picture fighting for your attention.

It’s not only more professional looking, it’s more relaxing to look at.

You can add a margin using inline, embedded, or external styles. In the picture of the woman I set the margin to 20 pixels on the left side and bottom of the image. Without the bottom margin one line of text ran under the image on my system. It wasn't too close, I just didn't like the look, and it may have looked different on another system. A margin can be set for any or all sides, and it can be the same or different on all sides.

Let’s create two style classes for our images. One class will be for images on the left side of the page and the other for images on the right side:

img.left {float: left; margin-right: 20px;}
img.right {float: right; margin-left: 20px;}

Notice I also added the float: left and float: right properties and values. That way we don’t have to code that into each image. We know the images are either going to be on the left or the right when we use these particular classes so we might as well save ourselves from having to code it into each image. You can learn more about floating elements with this CSS floats tutorial.

With the above code in our style sheet, all we need do is add the class we want to use to any image and the float and margin properties will be added.

To use one of these classes we just add it to our image:

<img src="image.jpg" class="left">

That will float an image on the left. Change left to right in the code to have the image float on the right side of the page or containing element. I left off the image width, height, and alt tags to keep the code example simple, but these should always be added to any image.

If you are working with a design that uses the same sized images you could code the width and height into the image class so you wouldn't have to coding them into each image. Or for groups of same sized images you could create a "size" class and use multiple classes in your image code. See the CSS classes tutorial for more.

Shorthand Tips

margin-top: 5px;
margin-right: 9px;
margin-bottom: 4px;
margin-left: 7px;

Just remove any side you don’t need a margin for from that order, but keep the order the same. If you do need to code all four sides and want a different margin on each side, use the shorthand method:

margin: 5px 9px 4px 7px;

That code example tells the browser the exact same thing the lenghty example above it does. If you want the top and bottom the same, and the sides the same, but want the sides different from the top and bottom, there’s a shorthand method for that too:

margin: 14px 23px;

In that example, the picture would have a margin of 14 pixels on the top and bottom and 23 pixels on each side.

There you go, as easy as 1, 2 . . . which is even easier than 1, 2, 3.

Of course, if the want the margin the same on all four sides, it’s even easier:

margin: 17px;

That will give an element a margin of 17 pixels on each side.

Let me close by saying . . . the end.