Quick Tip - Creating Space Around Your Images

Mini MeAdding images to your blog or web site is a great way to create visual interest and illustrate your idea, but how do you make your image stand strong? You have to give it some space! Whitespace helps your page look clean, organized and professional.

You can add space horizontally, vertically or both. And like everything else in Web design, there are at least two ways to do everything.

If you are using style sheets, you can use the “padding” property.

Example: padding-top: 2px;

If you are using inline styles (like I frequently do when adding an image to a blog post in Wordpress), you can add the “hspace” or “vspace” properties to your image source line of code.

Example: [img xsrc="your image here" alt="your alt text here" width="125" height="125" hspace="5" vspace="5" border="0" /]

**UPDATED - [img xsrc="pic.gif" mce_src="pic.gif" style="padding:2px;"/] is the preferred inline method as of HTML version 4.01 - Thanks to Phil at Unintentionally Blank for the heads up.

(note: < and > replaced with [ and ])

So, next time you want to add an image to your page, give it some breathing room and your readers will be sure to thank you!

Related posts:

  1. Quick Tip - iStockPhoto Freebies
  2. Creating a Website Marketing Plan: Step 1 - Define Your Purpose
  3. Images: Generate Ideas and Attract Attention
  4. Tag the Images, Too!
  5. Creating a Website Marketing Plan: Step 5 - Take Stock and Reassess

RSS 29. November 2006 (15:33)
Filed under: Graphic Design, Web Design

3 Comments»

  1. Phil

    7. December 2006 | 13:23 h

    Or a better way to do it inline is to use the style attribute and use inline css, like this:

    <img src="pic.gif" style="padding:2px;"/>

    hspace and vspace were deprecated in HTML4.01, so they are no longer valid attributes.

    Sorry for being picky!

  2. Char

    7. December 2006 | 20:03 h

    Thanks for stopping in Phil! I am very happy you pointed out the latest and greatest way to give images more space. I have edited the post to include your update. It can be challenging to stay on top of all the technology changes and trends - especially when you work from home. This is why it is great to be able to collaborate with others through blogging and forums.

  3. Phil

    8. December 2006 | 13:31 h

    Hi Char, glad I could be of service! It’s all part of my mission to help make web standards accessible and understandable to everyone! We can’t go around coding for Internet Explorer 4 anymore :D

Join the Conversation

© 2006-2008 Essential Keystrokes | Wordpress | dKret 1.9 heavily modified by Char at Keystrokes | Hosting by HostGator