Essential Keystrokes is…

where I share my favorite tips, tools, reviews and commentary on web design, marketing, blogging, new media and related topics. For more about this site and the voice behind it, check out my About page.


SubscribeFollow me on TwitterLinked In Stumble Upon What I Digg Email me

Quick Tip – Creating Space Around Your Images

By Char

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!



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!


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.


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

Leave a Comment


Team Training NE Celiac Family